Як працювати з декораторами TypeScript в Angular

Декоратори TypeScript — це особливий вид декларацій, які можна приєднати до класу, методу, засобу доступу, властивості або параметра. В Angular декоратори надають можливість додавати метадані до класів, що робить їх надзвичайно потужними для створення повторно використовуваних компонентів, служб тощо. Цей посібник пояснює, як працювати з декораторами TypeScript в Angular, надаючи приклади, щоб краще зрозуміти їх використання.

Що таке декоратори TypeScript?

Декоратори — це функції, які змінюють поведінку класу або члена класу. В Angular декоратори використовуються для визначення компонентів, директив, каналів і ін’єкційних сервісів. Вони забезпечують декларативний спосіб застосування метаданих до класу, який Angular використовує для різних цілей, таких як створення екземплярів компонентів або впровадження залежностей.

Поширені кутові декоратори

У Angular є кілька вбудованих декораторів, які використовуються для різних цілей. Нижче представлені найпоширеніші кутові декоратори:

• @Component – визначає компонент Angular.
• @Directive - визначає директиву Angular.
• @Pipe - Визначає кутову трубу.
• @Injectable – визначає службу, яку можна вставити в інші компоненти чи служби.
• @Input – прикрашає властивість, щоб зробити її входом для зв’язування даних.
• @Output — прикрашає властивість, щоб зробити її виводом, що прив’язує події.

Використання @Component Decorator

Декоратор @Component використовується для визначення компонента Angular. Він надає метадані про компонент, наприклад його селектор, шаблон, стилі та інші конфігурації.

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, World!</h1>`,
  styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent { }

У цьому прикладі декоратор @Component визначає простий компонент із шаблоном, що відображає «Hello, World!». Селектор визначає спеціальний тег HTML для використання для цього компонента.

Використання @Injectable Decorator

Декоратор @Injectable використовується для визначення класу обслуговування, який можна впроваджувати в інші компоненти або служби. Це невід’ємна частина системи ін’єкції залежностей Angular.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Angular', 'TypeScript', 'Decorators'];
  }
}

Тут декоратор @Injectable робить DataService доступним для ін’єкції залежностей у всій програмі.

Використання декораторів @Input і @Output

Декоратори @Input і @Output використовуються для створення вхідних властивостей і вихідних подій у компонентах Angular. Вони зазвичай використовуються для комунікації компонентів.

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>{{ message }}</p>
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Input() message: string;
  @Output() messageEvent = new EventEmitter();

  sendMessage() {
    this.messageEvent.emit('Hello from Child Component!');
  }
}

У цьому прикладі декоратор @Input використовується для передачі даних від батьківського компонента до дочірнього компонента. Декоратор @Output використовується для надсилання даних із дочірнього компонента назад до батьківського через подію.

Створення індивідуальних декораторів

Спеціальні декоратори можна створити в Angular, щоб додати певну поведінку або метадані до класів, методів або властивостей. Нижче наведено приклад простого декоратора класу:

function LogClass(constructor: Function) {
  console.log('Class Decorator called:', constructor);
}

@LogClass
class MyService {
  constructor() {
    console.log('MyService created');
  }
}

Тут функція LogClass є спеціальним декоратором, який записує клас на консоль, коли він визначений. Застосування @LogClass до MyService журналює повідомлення під час його створення.

Висновок

Декоратори в Angular надають потужний спосіб додавати метадані та поведінку до класів, методів, властивостей і параметрів. Розуміння того, як використовувати такі вбудовані декоратори, як @Component, @Injectable, @Input і @Output, є важливим для ефективного Angular розвитку. Крім того, можна створювати спеціальні декоратори для задоволення конкретних потреб програми, додаючи гнучкості процесу розробки.