Compreendendo decoradores TypeScript

Decoradores TypeScript fornecem uma maneira poderosa de adicionar funcionalidade a classes, métodos, propriedades e parâmetros em tempo de execução. Eles são frequentemente usados ​​em frameworks como Angular para injeção de dependência, registro, validação e muito mais. Este artigo explicará os diferentes tipos de decoradores em TypeScript e como usá-los efetivamente.

O que são decoradores TypeScript?

Decoradores em TypeScript são funções prefixadas com um símbolo @ e podem ser anexadas a vários elementos como classes, métodos ou propriedades. Eles permitem que você modifique o comportamento do código ao qual estão anexados, sem alterar o código diretamente.

Tipos de Decoradores

• Decoradores de classe: Aplicado a uma classe inteira.
• Decoradores de métodos: Aplicados a um método dentro de uma classe.
• Decoradores de propriedade: Aplicado a uma propriedade em uma classe.
• Decoradores de parâmetros: Aplicados aos parâmetros de um método em uma classe.

Como habilitar decoradores no TypeScript

Antes de poder usar decoradores, certifique-se de habilitá-los no seu arquivo tsconfig.json definindo "experimentalDecorators" como true.

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Decoradores de classe

Um class decorator é aplicado a uma classe inteira. Ele é útil para adicionar metadados ou modificar o comportamento de uma classe.

function Controller(route: string) {
  return function (target: Function) {
    target.prototype.route = route;
  };
}

@Controller('/api/user')
class UserController {
  // Class logic
}

console.log(new UserController().route); // Outputs: '/api/user'

Decoradores de Método

Decoradores de método são aplicados a métodos dentro de uma classe. Esses decoradores podem ser usados ​​para modificar ou registrar o comportamento de um método.

function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyName} with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };
}

class Calculator {
  @Log
  add(a: number, b: number) {
    return a + b;
  }
}

const calculator = new Calculator();
calculator.add(2, 3); // Logs: 'Calling add with arguments: 2,3'

Decoradores de imóveis

Os decoradores de propriedade são usados ​​para adicionar funcionalidade a propriedades em uma classe. Eles podem ser úteis para validação ou para adicionar metadados a uma propriedade.

function ReadOnly(target: any, key: string) {
  const descriptor: PropertyDescriptor = {
    writable: false
  };
  return descriptor;
}

class Person {
  @ReadOnly
  name: string = 'John Doe';
}

const person = new Person();
person.name = 'Jane Doe'; // Error: Cannot assign to read only property 'name'

Decoradores de Parâmetros

Decoradores de parâmetros são usados ​​para modificar ou registrar informações sobre parâmetros de métodos.

function LogParameter(target: any, propertyName: string, index: number) {
  const metadataKey = `log_${propertyName}_parameters`;
  
  if (Array.isArray(target[metadataKey])) {
    target[metadataKey].push(index);
  } else {
    target[metadataKey] = [index];
  }
}

class Demo {
  method(@LogParameter param1: string, @LogParameter param2: number) {
    // Method logic
  }
}

Conclusão

Decoradores no TypeScript fornecem uma maneira poderosa de aprimorar a funcionalidade do seu código sem modificar sua estrutura. Ao entender como usar decoradores de classe, método, propriedade e parâmetro, você pode implementar recursos avançados como registro, validação e injeção de dependência. Decoradores são um recurso essencial no TypeScript que pode melhorar muito seu fluxo de trabalho de desenvolvimento, especialmente em aplicativos grandes.