Seja bem-vindo ao fascinante mundo dos decorators em JavaScript e TypeScript! 🚀 Neste post, vamos explorar o poder dessas ferramentas incríveis, desde adicionar funcionalidades extras a classes até personalizar o comportamento de métodos. Vamos mergulhar juntos nesse universo de possibilidades e desvendar como essas pequenas anotações podem transformar a maneira como estruturamos e organizamos nosso código. Vamos lá!
Decorator para Classe
O “Class Decorator” é constituído apenas de uma função que herda o constructor da classe alvo, e pode ou não retornar uma nova classe estendendo o constructor recebido como parâmetro.
Exemplo:
Nos dois exemplos abaixo, mostro como adicionar um novo método a classe utilizando a criação de uma nova classe herdando a original, ou com a manipulação usando prototype.
Como utilizar:
Para utilizar um decorator no Typescript, precisamos somente “chamar” o decorator logo antes do nome da classe, utilizando o padrão @NomeDoDecorator. Este método é chamado de “Suggar decorator”, implementado pelo Typescript.
Decorator para Método
Como o Class Decorator, este é chamado exatamente antes do método, também sendo utilizado o padrão @NomeDoDecorator
Este decorator recebe 3 parâmetros em sua função de retorno, sendo eles:
- target – Representação da classe que contém o método Pode ser usado para acessar ou alterar a classe e/ou seus membros.
- propertyKey – Nome do método que esta sendo utilizado
- descriptor – Objeto com a descrição do método, utilizado para alterar o comportamento do método e/ou seus metadados.
Exemplo:
Neste exemplo, criamos um decorator para validação de Método HTTP, para limitar uma requisição em somente um método.
No exemplo, modificamos o comportamento do método, para ser feita uma validação de Método HTTP antes de executar o código original.
Ao verificar a função decorada, definimos uma constante com uma cópia do método original, e após isso modificamos o valor com uma nova função que retornará uma execução do original.
Neste exemplo somente fazemos uma verificação, porém como pode ser visto, temos acesso a todas as informações do método original, sendo possível fazer uma variedade de modificações em seu comportamento, incluindo validação e/ou modificação de seus parâmetros.
Uso do Method decorator:
No código abaixo, utilizamos o decorator logo antes do método, podendo passar parâmetros para o mesmo.
Na primeira classe, inserimos o decorator no método de execução para limitar a requisição para somente métodos POST, e no segundo, para métodos GET.
Decorator puro para funções
Os exemplos acima, o decorator usado é uma feature experimental do Typescript, e somente funcionam em Classes e seus derivados, porém, é possível criar decorators para funções normais de um modo um pouco diferente.
Importante saber que este método não pode ser usado com o padrão do typescript @NomeDaFuncao, porém segue um padrão um pouco parecido com o “method decorator” onde também pode ser passado parâmetros.
Este tipo de decorator pode ter vários nomes, como, “pure decorator” ou “simple decorator” e diferente do “suggar decorator” implementado pelo Typescript, este é feito para funções nativas ou arrow functions. Parar criar um decorator puro utilizamos a estratégia de “high order function”, enviando a função a ser executada como parâmetro, assim, podemos executar o decorator antes de chamar a função callback.
No exemplo acima criamos o decorator “guard” para gerenciamento de rotas, como primeiro parâmetro devemos definir os cargos que tem acesso a request, e em seguida definimos a função callback que deve ser executada caso o usuário tenha o acesso correto.
🚀✨
É isso aí, chegamos ao final! Espero que essas dicas de decorators tenham feito seu código brilhar um pouquinho mais.
Seja o primeiro a comentar