Introdução aos decoradores

Os decoradores no TypeScript são funções especiais que permitem adicionar metadados ou modificar o comportamento de classes, métodos e propriedades.

Eles são frequentemente usados em estruturas de desenvolvimento como Angular para simplificar o desenvolvimento.

Como os decoradores funcionam

Um decorador é uma função aplicada a uma classe ou aos seus membros (métodos, propriedades etc.).

Por exemplo, @Component no Angular é um decorador que adiciona metadados a uma classe para defini-la como um componente.

Usando decoradores integrados

O TypeScript tem decoradores integrados, como:

• @readonly: torna uma propriedade somente leitura.
• @enumerable: controla se uma propriedade pode ser enumerada.

Esses decoradores ajudam a modificar diretamente o comportamento de propriedades ou métodos.

Criando um decorador simples

Você pode criar seu próprio decorador para registrar mensagens ou adicionar funcionalidades:

Aplique-o a uma propriedade: @Log.

function Log(target: any, propertyName: string) {
  console.log(`Property ${propertyName} was accessed`);
}

Decoradores de classe

Os decoradores de classe são usados para modificar ou aprimorar o comportamento de uma classe inteira:

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

Aplique-o a uma classe: @SimpleDecorator.

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

Decoradores de método

Os decoradores de método modificam o comportamento de um método de classe:

Use-o em um método: @LogMethod.

function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(`Method ${propertyKey} was called`);
}

Usando decoradores no Angular

O Angular depende muito de decoradores para adicionar metadados aos seus componentes:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

O decorador @Component define a classe como um componente do Angular.

Boas práticas para usar decoradores

Ao usar decoradores:

• Mantenha-os simples e focados.
• Use-os para metadados, não para lógica complexa.
• Aproveite os decoradores integrados quando possível para economizar tempo.

Parabéns!

Você aprendeu como os decoradores funcionam no TypeScript e como podem ser usados para modificar ou aprimorar seu código. Continue experimentando com decoradores para dominar seu uso em seus projetos!