DEV Community

Cover image for Decorators em TypeScript
Levy Henrique Alves Nunes
Levy Henrique Alves Nunes

Posted on

Decorators em TypeScript

Os decorators são um recurso proposto para JavaScript e são adotados por TypeScript para adicionar anotações e uma sintaxe de metaprogramação para classes e membros de classes. Eles oferecem uma maneira de adicionar comportamentos adicionais a classes, métodos, propriedades, parâmetros ou acessadores.

O que são decorators e como usá-los

Decorators são funções especiais que podem ser usadas para estender a funcionalidade de classes, métodos, propriedades e parâmetros. Eles são prefixados com @ e podem ser anexados a várias declarações.

Para usar decorators em TypeScript, você precisa habilitar a opção experimentalDecorators em seu arquivo tsconfig.json.

{
  "compilerOptions": {
    "target": "ES5",
    "experimentalDecorators": true
  }
}
Enter fullscreen mode Exit fullscreen mode

Exemplos práticos

1. Logging

Um decorator simples para registrar quando um método é chamado:

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

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

    return descriptor;
}

class MathOperations {
    @LogMethod
    add(x: number, y: number): number {
        return x + y;
    }
}

const math = new MathOperations();
math.add(2, 3);  // Log: Chamado método add com argumentos: [2,3]
Enter fullscreen mode Exit fullscreen mode

2. Memoização

Memoização é uma técnica de otimização em que o resultado de uma função para um conjunto específico de entradas é armazenado, e se a mesma entrada ocorrer novamente, o resultado armazenado é retornado em vez de recalculá-lo.

function Memoize(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    const cache = new Map<string, any>();

    descriptor.value = function (...args: any[]) {
        const cacheKey = JSON.stringify(args);
        if (cache.has(cacheKey)) {
            return cache.get(cacheKey);
        }
        const result = originalMethod.apply(this, args);
        cache.set(cacheKey, result);
        return result;
    };

    return descriptor;
}

class Fibonacci {
    @Memoize
    calculate(n: number): number {
        if (n < 2) return n;
        return this.calculate(n - 1) + this.calculate(n - 2);
    }
}
Enter fullscreen mode Exit fullscreen mode

3. Validação com decorators

Podemos usar decorators para validar argumentos de métodos.

function ValidateNonNull(target: Object, propertyKey: string, parameterIndex: number) {
    const originalMethod = target[propertyKey];

    target[propertyKey] = function (...args: any[]) {
        if (args[parameterIndex] == null) {
            throw new Error(`Argument at index ${parameterIndex} should not be null or undefined.`);
        }
        return originalMethod.apply(this, args);
    };
}

class UserService {
    createUser(@ValidateNonNull name: string) {
        // código para criar um usuário
    }
}
Enter fullscreen mode Exit fullscreen mode

Ao usar o decorator acima, a função createUser lançará um erro se o nome fornecido for nulo ou indefinido.

Conclusão

Os decorators em TypeScript oferecem uma poderosa ferramenta de metaprogramação que permite adicionar comportamentos adicionais ao código existente de maneira elegante e reutilizável. Seja para logging, memoização ou validação, os decorators tornam o código mais limpo e mais fácil de manter.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Postgres on Neon - Get the Free Plan

No credit card required. The database you love, on a serverless platform designed to help you build faster.

Get Postgres on Neon

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay