Decoradores JavaScript são um recurso poderoso que pode simplificar o código e melhorar a legibilidade, especialmente ao trabalhar com aplicativos complexos. Neste blog, simplificaremos os decoradores com exemplos práticos, tornando mais fácil para desenvolvedores avançados implementá-los de forma eficaz.

O que são decoradores JavaScript?

Decoradores são uma sintaxe especial usada para modificar classes e seus membros. São funções que podem ser aplicadas a classes, métodos ou propriedades, permitindo estender o comportamento sem modificar diretamente o código-fonte. Eles permitem encapsular lógica como registro, validação ou outras preocupações de meta-nível de uma forma limpa e reutilizável.

Por que usar decoradores?

• Lógica reutilizável: Decoradores permitem adicionar funcionalidades comuns (como registro, validação, etc.) sem repetir o mesmo código em seu aplicativo.

• Legibilidade aprimorada: Com decoradores, você pode encapsular lógica complexa em uma sintaxe declarativa limpa, tornando seu código mais legível e fácil de manter.

• Separação de preocupações: Você pode manter a lógica de negócios separada das preocupações de nível meta, como armazenamento em cache, monitoramento ou rastreamento de desempenho.

Os decoradores podem ser usados ​​em JavaScript agora?

Atualmente, os decoradores não são suportados nativamente em JavaScript. Eles são uma proposta do Estágio 3 no processo de especificação ECMAScript, o que significa que estão perto de se tornar um recurso padrão. No entanto, os decoradores ainda não fazem parte da especificação oficial do JavaScript, portanto, só podem ser usados ​​com um transpilador como TypeScript ou Babel.

Ativando decoradores no TypeScript

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

Isso permitirá que você use decoradores em seu código TypeScript, e o TypeScript cuidará da transpilação para JavaScript.

Habilitando Decoradores no Babel

Se você estiver usando Babel, você pode habilitar decoradores usando o plugin @babel/plugin-proposal-decorators. Para configurá-lo, siga estas etapas:

1.Instale o plug-in:

 npm install @babel/plugin-proposal-decorators --save-dev

2.Adicione o plugin à sua configuração do Babel:

 {
     "plugins": [
         ["@babel/plugin-proposal-decorators", { "legacy": true }]
     ]
 }

Esta configuração permitirá que o Babel transpile a sintaxe do decorador para JavaScript padrão.

Exemplo do mundo real de uso de decoradores

Vejamos um exemplo real de como decoradores podem ser usados ​​para adicionar funcionalidades comuns a classes, métodos e propriedades. Começaremos com um decorador de registro simples e um decorador de validação.

Decorador de registro

function logExecution(target, key, descriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args) {
        console.log(`Method ${key} invoked with arguments:`, args);
        return originalMethod.apply(this, args);
    };

    return descriptor;
}

class Calculator {
    @logExecution
    add(a, b) {
        return a   b;
    }
}

const calc = new Calculator();
calc.add(5, 7); // Logs: Method add invoked with arguments: [5, 7]

Principais benefícios do uso de decoradores

• Modularização: Os decoradores permitem separar funcionalidades como registro, validação e monitoramento de desempenho da lógica principal de suas classes ou métodos.

• Reutilização de código: Ao usar decoradores, você evita repetir a mesma lógica em vários métodos ou classes.

• Legibilidade: Os decoradores tornam seu código mais declarativo, permitindo que outros desenvolvedores entendam facilmente o comportamento e a finalidade de uma classe ou método rapidamente.

À medida que os decoradores se aproximam de se tornar um padrão, eles continuarão a ser uma ferramenta essencial para desenvolvedores que buscam aprimorar seus aplicativos JavaScript.

Comece hoje mesmo a experimentar decoradores para melhorar a estrutura e a facilidade de manutenção de seus projetos!