Proposta de Decorators em JavaScript: Aprimoramento de Métodos e Anotação de Metadados

O JavaScript, como uma linguagem dinâmica e em constante evolução, busca continuamente maneiras de melhorar a legibilidade, a manutenibilidade e a extensibilidade do código. Uma das funcionalidades mais aguardadas que visa abordar esses aspectos é a proposta de Decorators. Este artigo oferece uma visão abrangente dos Decorators em JavaScript, explorando sua sintaxe, capacidades e o impacto potencial no desenvolvimento moderno de JavaScript. Embora atualmente seja uma proposta em Estágio 3, os decorators já são amplamente utilizados em frameworks como o Angular e são cada vez mais adotados por meio de transpiladores como o Babel. Isso torna a compreensão deles crucial para qualquer desenvolvedor JavaScript moderno.

O que são Decorators em JavaScript?

Decorators são um padrão de projeto emprestado de outras linguagens como Python e Java. Em essência, eles são um tipo especial de declaração que pode ser anexada a uma classe, método, acessador, propriedade ou parâmetro. Os decorators usam a sintaxe @expression, onde expression deve avaliar para uma função que será chamada em tempo de execução com informações sobre a declaração decorada.

Pense nos decorators como uma forma de adicionar funcionalidade extra ou metadados ao código existente sem modificá-lo diretamente. Isso promove uma base de código mais declarativa e de fácil manutenção.

Sintaxe e Uso Básico

Um decorator simples é uma função que recebe um, dois ou três argumentos, dependendo do que está decorando:

• Para um decorator de classe, o argumento é o construtor da classe.
• Para um decorator de método ou acessador, os argumentos são o objeto de destino (o protótipo da classe ou o construtor da classe para membros estáticos), a chave da propriedade (o nome do método ou acessador) e o descritor da propriedade.
• Para um decorator de propriedade, os argumentos são o objeto de destino e a chave da propriedade.
• Para um decorator de parâmetro, os argumentos são o objeto de destino, a chave da propriedade e o índice do parâmetro na lista de parâmetros da função.

Decorators de Classe

Um decorator de classe é aplicado ao construtor da classe. Ele pode ser usado para observar, modificar ou substituir a definição de uma classe. Um caso de uso comum é registrar uma classe em um framework ou biblioteca.

Exemplo: Registrando Instanciações de Classe

            function logClass(constructor: Function) {
 return class extends constructor {
 constructor(...args: any[]) {
 super(...args);
 console.log(`Nova instância de ${constructor.name} criada.`);
 }
 };
}

@logClass
class MyClass {
 constructor(public message: string) {
 }
}

const instance = new MyClass("Olá, Decorators!"); // Saída: Nova instância de MyClass criada.
            

              
                Copy
              
            
          

Neste exemplo, o decorator logClass modifica o construtor de MyClass para registrar uma mensagem toda vez que uma nova instância é criada.

Decorators de Método

Decorators de método são aplicados a métodos dentro de uma classe. Eles podem ser usados para observar, modificar ou substituir o comportamento de um método. Isso é útil para coisas como registrar chamadas de método, validar argumentos ou implementar cache.

Exemplo: Registrando Chamadas de Método

            function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 const originalMethod = descriptor.value;

 descriptor.value = function (...args: any[]) {
 console.log(`Chamando o método ${propertyKey} com argumentos: ${JSON.stringify(args)}`);
 const result = originalMethod.apply(this, args);
 console.log(`O método ${propertyKey} retornou: ${result}`);
 return result;
 };

 return descriptor;
}

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

const calculator = new Calculator();
const sum = calculator.add(5, 3); // Saída: Chamando o método add com argumentos: [5,3]
 // Saída: O método add retornou: 8
            

              
                Copy
              
            
          

O decorator logMethod registra os argumentos e o valor de retorno do método add.

Decorators de Acessor

Decorators de acessor são semelhantes aos decorators de método, mas se aplicam a métodos getter ou setter. Eles podem ser usados para controlar o acesso a propriedades ou adicionar lógica de validação.

Exemplo: Validando Valores do Setter

            function validate(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 const originalSet = descriptor.set;

 descriptor.set = function (value: number) {
 if (value < 0) {
 throw new Error("O valor deve ser não negativo.");
 }
 originalSet.call(this, value);
 };
}

class Temperature {
 private _celsius: number = 0;

 @validate
 set celsius(value: number) {
 this._celsius = value;
 }

 get celsius(): number {
 return this._celsius;
 }
}

const temperature = new Temperature();
temperature.celsius = 25; // OK
// temperature.celsius = -10; // Lança um erro
            

              
                Copy
              
            
          

O decorator validate garante que o setter celsius aceite apenas valores não negativos.

Decorators de Propriedade

Decorators de propriedade são aplicados a propriedades de classe. Eles podem ser usados para definir metadados sobre a propriedade ou para modificar seu comportamento.

Exemplo: Definindo uma Propriedade Obrigatória

            function required(target: any, propertyKey: string) {
 let existingRequiredProperties: string[] = target.__requiredProperties__ || [];
 existingRequiredProperties.push(propertyKey);
 target.__requiredProperties__ = existingRequiredProperties;
}

class UserProfile {
 @required
 name: string;

 age: number;

 constructor(data: any) {
 this.name = data.name;
 this.age = data.age;

 const requiredProperties: string[] = (this.constructor as any).prototype.__requiredProperties__ || [];
 requiredProperties.forEach(property => {
 if (!this[property]) {
 throw new Error(`Propriedade obrigatória ausente: ${property}`);
 }
 });
 }
}

// const user = new UserProfile({}); // Lança um erro: Propriedade obrigatória ausente: name
const user = new UserProfile({ name: "John Doe" }); // OK
            

              
                Copy
              
            
          

O decorator required marca a propriedade name como obrigatória. O construtor então verifica se todas as propriedades obrigatórias estão presentes.

Decorators de Parâmetro

Decorators de parâmetro são aplicados a parâmetros de função. Eles podem ser usados para adicionar metadados sobre o parâmetro ou para modificar seu comportamento. Eles são menos comuns que outros tipos de decorators.

Exemplo: Injetando Dependências

            import 'reflect-metadata';

const Injectable = (): ClassDecorator => {
 return (target: any) => {
 Reflect.defineMetadata('injectable', true, target);
 };
};

const Inject = (token: any): ParameterDecorator => {
 return (target: any, propertyKey: string | symbol | undefined, parameterIndex: number) => {
 Reflect.defineMetadata('design:paramtypes', [token], target, propertyKey!)
 };
};

@Injectable()
class DatabaseService {
 connect() {
 console.log("Conectando ao banco de dados...");
 }
}

class UserService {
 private databaseService: DatabaseService;

 constructor(@Inject(DatabaseService) databaseService: DatabaseService) {
 this.databaseService = databaseService;
 }

 getUser(id: number) {
 this.databaseService.connect();
 console.log(`Buscando usuário com ID: ${id}`);
 }
}

const databaseService = new DatabaseService();
const userService = new UserService(databaseService);
userService.getUser(123);
            

              
                Copy
              
            
          

Neste exemplo, estamos usando reflect-metadata (uma prática comum ao trabalhar com injeção de dependência em JavaScript/TypeScript). O decorator @Inject informa ao construtor do UserService para injetar uma instância do DatabaseService. Embora o exemplo acima não possa ser executado completamente sem configuração adicional, ele demonstra o efeito pretendido.

Casos de Uso e Benefícios

Os decorators oferecem uma gama de benefícios e podem ser aplicados a vários casos de uso:

• Anotação de Metadados: Os decorators podem ser usados para anexar metadados a classes, métodos e propriedades. Esses metadados podem ser usados por frameworks e bibliotecas para fornecer funcionalidades adicionais, como injeção de dependência, roteamento e validação.
• Programação Orientada a Aspectos (AOP): Os decorators podem implementar conceitos de AOP como logging, segurança e gerenciamento de transações, envolvendo métodos com comportamento adicional.
• Reutilização de Código: Os decorators promovem a reutilização de código, permitindo que você extraia funcionalidades comuns para decorators reutilizáveis.
• Legibilidade Aprimorada: Os decorators tornam o código mais legível e declarativo, separando as responsabilidades e reduzindo o código repetitivo (boilerplate).
• Integração com Frameworks: Os decorators são amplamente utilizados em frameworks JavaScript populares como Angular, NestJS e MobX para fornecer uma maneira mais declarativa e expressiva de definir componentes, serviços e outros conceitos específicos do framework.

Exemplos do Mundo Real e Considerações Internacionais

Embora os conceitos centrais dos decorators permaneçam os mesmos em diferentes contextos de programação, sua aplicação pode variar com base no framework ou biblioteca específica utilizada. Aqui estão alguns exemplos:

• Angular (Desenvolvido pelo Google, usado globalmente): O Angular utiliza intensivamente decorators para definir componentes, serviços e diretivas. Por exemplo, o decorator @Component é usado para definir um componente de UI com seu template, estilos e outros metadados. Isso permite que desenvolvedores de diversas origens criem e gerenciem facilmente interfaces de usuário complexas usando uma abordagem padronizada.

              
   @Component({
   selector: 'app-my-component',
   templateUrl: './my-component.html',
   styleUrls: ['./my-component.css']
   })
   class MyComponent {
   // Lógica do componente aqui
   }
   
              
  
                
                  Copy
                
              
            

• NestJS (Um framework Node.js inspirado no Angular, adotado globalmente): O NestJS usa decorators para definir controladores, rotas e módulos. Os decorators @Controller e @Get são usados para definir endpoints de API e seus manipuladores correspondentes. Isso simplifica o processo de construção de aplicações do lado do servidor escaláveis e de fácil manutenção, independentemente da localização geográfica do desenvolvedor.

              
   @Controller('users')
   class UsersController {
   @Get()
   findAll(): string {
   return 'Esta ação retorna todos os usuários';
   }
   }
   
              
  
                
                  Copy
                
              
            

• MobX (Uma biblioteca de gerenciamento de estado, amplamente utilizada em aplicações React globalmente): O MobX usa decorators para definir propriedades observáveis e valores computados. Os decorators @observable e @computed rastreiam automaticamente as alterações nos dados e atualizam a UI de acordo. Isso ajuda os desenvolvedores a construir interfaces de usuário responsivas e eficientes para públicos internacionais, garantindo uma experiência de usuário suave, mesmo com fluxos de dados complexos.

              
   class Store {
   @observable count = 0;
  
   @computed get doubledCount() {
   return this.count * 2;
   }
  
   increment() {
   this.count++;
   }
   }
   
              
  
                
                  Copy
                
              
            

Considerações sobre Internacionalização: Ao usar decorators em projetos destinados a um público global, é importante considerar a internacionalização (i18n) e a localização (l10n). Embora os decorators em si não lidem diretamente com i18n/l10n, eles podem ser usados para aprimorar o processo:

• Adicionando Metadados para Tradução: Decorators podem ser usados para marcar propriedades ou métodos que precisam ser traduzidos. Esses metadados podem então ser usados por bibliotecas i18n para extrair e traduzir o texto relevante.
• Carregando Traduções Dinamicamente: Decorators podem ser usados para carregar traduções dinamicamente com base na localidade do usuário. Isso garante que a aplicação seja exibida no idioma preferido do usuário, independentemente de sua localização.
• Formatando Datas e Números: Decorators podem ser usados para formatar datas e números de acordo com a localidade do usuário. Isso garante que datas e números sejam exibidos em um formato culturalmente apropriado.

Por exemplo, imagine um decorator `@Translatable` que marca uma propriedade como necessitando de tradução. Uma biblioteca i18n poderia então varrer a base de código, encontrar todas as propriedades marcadas com `@Translatable` e extrair o texto para tradução. Após a tradução, a biblioteca pode substituir o texto original pela versão traduzida com base na localidade do usuário. Essa abordagem promove um fluxo de trabalho de i18n/l10n mais organizado e de fácil manutenção, especialmente em aplicações grandes e complexas.

O Estado Atual da Proposta e o Suporte dos Navegadores

A proposta de Decorators do JavaScript está atualmente no Estágio 3 do processo de padronização do TC39. Isso significa que a proposta está relativamente estável e provavelmente será incluída em uma especificação futura do ECMAScript.

Embora o suporte nativo dos navegadores para decorators ainda seja limitado, eles podem ser usados na maioria dos projetos JavaScript modernos usando transpiladores como o Babel ou o compilador do TypeScript. Essas ferramentas transformam a sintaxe do decorator em código JavaScript padrão que pode ser executado em qualquer navegador ou ambiente Node.js.

Usando o Babel: Para usar decorators com o Babel, você precisa instalar o plugin @babel/plugin-proposal-decorators e configurá-lo no seu arquivo de configuração do Babel (.babelrc ou babel.config.js). Você provavelmente também precisará do @babel/plugin-proposal-class-properties.

            
 // babel.config.js
 module.exports = {
 presets: ['@babel/preset-env'],
 plugins: [
 ['@babel/plugin-proposal-decorators', { legacy: true }],
 ['@babel/plugin-proposal-class-properties', { loose: true }]
 ],
 };
 
            

              
                Copy
              
            
          

Usando o TypeScript: O TypeScript tem suporte embutido para decorators. Você precisa habilitar a opção do compilador experimentalDecorators no seu arquivo tsconfig.json.

            
 // tsconfig.json
 {
 "compilerOptions": {
 "target": "es5",
 "experimentalDecorators": true,
 "emitDecoratorMetadata": true,  // Opcional, mas útil para injeção de dependência
 }
 }
 
            

              
                Copy
              
            
          

Note a opção emitDecoratorMetadata. Ela funciona com bibliotecas como reflect-metadata para habilitar a injeção de dependência via decorators.

Impacto Potencial e Direções Futuras

A proposta de Decorators do JavaScript tem o potencial de impactar significativamente a maneira como escrevemos código JavaScript. Ao fornecer uma maneira mais declarativa e expressiva de adicionar funcionalidade a classes, métodos e propriedades, os decorators podem melhorar a legibilidade, a manutenibilidade e a reutilização do código.

À medida que a proposta avança no processo de padronização e ganha maior adoção, podemos esperar ver mais frameworks e bibliotecas adotando os decorators para fornecer uma experiência de desenvolvimento mais intuitiva e poderosa.

Além disso, as capacidades de metadados dos decorators podem abrir novas possibilidades para ferramentas e análise de código. Por exemplo, linters e editores de código podem usar metadados de decorators para fornecer sugestões e mensagens de erro mais precisas e relevantes.

Conclusão

Os Decorators do JavaScript são uma funcionalidade poderosa e promissora que pode aprimorar significativamente o desenvolvimento moderno de JavaScript. Ao entender sua sintaxe, capacidades e potenciais casos de uso, os desenvolvedores podem aproveitar os decorators para escrever código mais fácil de manter, legível e reutilizável. Embora o suporte nativo dos navegadores ainda esteja em evolução, transpiladores como o Babel e o TypeScript tornam possível o uso de decorators na maioria dos projetos JavaScript hoje. À medida que a proposta avança para a padronização e ganha maior adoção, os decorators provavelmente se tornarão uma ferramenta essencial no arsenal do desenvolvedor JavaScript.

Leitura Adicional

• Proposta de Decorators do TC39
• Decorators do TypeScript
• Plugin de Proposta de Decorators do Babel
• reflect-metadata