Como trabalhar com decoradores TypeScript em Angular

Decoradores TypeScript são um tipo especial de declaração que pode ser anexada a uma classe, método, acessador, propriedade ou parâmetro. No Angular, os decoradores fornecem uma maneira de adicionar metadados a classes, tornando-as altamente poderosas para criar componentes reutilizáveis, serviços e muito mais. Este guia explica como trabalhar com decoradores TypeScript no Angular, fornecendo exemplos para ajudar a entender melhor seu uso.

O que são decoradores TypeScript?

Decoradores são funções que modificam o comportamento de uma classe ou membro de classe. No Angular, decoradores são usados ​​para definir componentes, diretivas, pipes e serviços injetáveis. Eles fornecem uma maneira declarativa de aplicar metadados a uma classe, que o Angular usa para vários propósitos, como criar instâncias de componentes ou injetar dependências.

Decoradores angulares comuns

Angular tem vários decoradores internos usados ​​para diferentes propósitos. Abaixo estão os decoradores Angular mais comuns:

• @Component - Define um componente Angular.
• @Directive - Define uma diretiva Angular.
• @Pipe - Define um tubo angular.
• @Injectable - Define um serviço que pode ser injetado em outros componentes ou serviços.
• @Input - Decora uma propriedade para torná-la uma entrada de vinculação de dados.
• @Output - Decora uma propriedade para torná-la uma saída de associação de eventos.

Usando @Component Decorator

O decorador @Component é usado para definir um componente Angular. Ele fornece metadados sobre o componente, como seu seletor, template, estilos e outras configurações.

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

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

Neste exemplo, o decorador @Component define um componente simples com um modelo exibindo "Hello, World!". O selector especifica a tag HTML personalizada a ser usada para este componente.

Usando @Injectable Decorator

O decorador @Injectable é usado para definir uma classe de serviço que pode ser injetada em outros componentes ou serviços. É uma parte essencial do sistema de injeção de dependência do Angular.

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

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

Aqui, o decorador @Injectable torna o DataService disponível para injeção de dependência em todo o aplicativo.

Usando decoradores @Input e @Output

Os decoradores @Input e @Output são usados ​​para criar propriedades de entrada e eventos de saída em componentes Angular. Eles são comumente usados ​​para comunicação de componentes.

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!');
  }
}

Neste exemplo, o decorador @Input é usado para passar dados de um componente pai para um componente filho. O decorador @Output é usado para enviar dados do componente filho de volta para o componente pai por meio de um evento.

Criando decoradores personalizados

Decoradores personalizados podem ser criados no Angular para adicionar comportamento específico ou metadados a classes, métodos ou propriedades. Abaixo está um exemplo de um decorador de classe simples:

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

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

Aqui, a função LogClass é um decorador personalizado que registra a classe no console quando ela é definida. Aplicar @LogClass a MyService registra mensagens durante sua criação.

Conclusão

Decoradores no Angular fornecem uma maneira poderosa de adicionar metadados e comportamento a classes, métodos, propriedades e parâmetros. Entender como usar decoradores integrados como @Component, @Injectable, @Input e @Output é essencial para o desenvolvimento Angular eficaz. Além disso, decoradores personalizados podem ser criados para atender a necessidades específicas em um aplicativo, adicionando flexibilidade ao processo de desenvolvimento.