Decoradores e metadados
Ativar decoradores experimentais, escrever decoradores de classes, métodos e propriedades e utilizar reflect-metadata em padrões de injeção de dependências.
Decoradores e metadados é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que são decoradores
Decoradores são funções que modificam classes, métodos, propriedades ou parâmetros no momento da definição. Eles são muito usados em Angular, NestJS, TypeORM e MobX baseado em classes.
Sintaxe de decoradores
Coloque @DecoratorName como prefixo de uma classe, método, propriedade ou parâmetro. A função do decorador é executada quando a classe é definida.
@Component({ selector: 'app-root' })
export class AppComponent {
@Input() title: string;
@HostListener('click')
onClick() {
console.log('clicked');
}
}Ativando decoradores
Ative o sinalizador experimental em tsconfig.json. Os novos decoradores do ECMAScript Stage 3 (TypeScript 5.0+) não precisam desse sinalizador, mas têm semântica diferente.
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}Decorador de classe
Recebe o construtor como argumento. Pode substituir, envolver ou ampliar a classe.
function Singleton<T extends { new (...a: any[]): {} }>(target: T) {
let instance: T;
return class extends target {
constructor(...args: any[]) {
if (!instance) instance = new target(...args) as T;
return instance;
}
};
}
@Singleton
class Logger { /* ... */ }Decorador de método
Recebe (alvo, chave, descritor). Pode envolver o método — por exemplo, para registrar chamadas.
function Log(target: any, key: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`[${key}]`, args);
return original.apply(this, args);
};
}
class Service {
@Log
greet(name: string) { return `Hello ${name}`; }
}Decorador de propriedade
Recebe (alvo, chave). É frequentemente usado com reflect-metadata para registrar informações sobre a propriedade.
function Required(target: any, key: string) {
const existing = Reflect.getMetadata('required', target) || [];
Reflect.defineMetadata('required', [...existing, key], target);
}
class User {
@Required name: string;
@Required email: string;
}Decorador de parâmetro
Recebe (alvo, chave, parameterIndex). É usado para injeção de dependências — registrando quais parâmetros precisam de quais serviços.
function Inject(token: string) {
return function (target: any, key: string, index: number) {
const existing = Reflect.getMetadata('inject', target, key) || {};
existing[index] = token;
Reflect.defineMetadata('inject', existing, target, key);
};
}
class UserService {
constructor(@Inject('Database') db: Database) {}
}reflect-metadata
reflect-metadata é um polyfill que permite aos decoradores ler e gravar metadados em classes. É necessário para o DI do Angular e para muitos ORMs.
npm install reflect-metadata
// main.ts (entry point):
import 'reflect-metadata';
import { Reflect } from 'reflect-metadata';
Reflect.defineMetadata('key', 'value', target);
Reflect.getMetadata('key', target); // 'value'Fábricas de decoradores
Uma fábrica retorna um decorador — e é usada para passar argumentos.
function Component(config: { selector: string }) {
return function (target: any) {
target.selector = config.selector;
};
}
@Component({ selector: 'app-root' })
class AppComponent {}Caso de uso: validação
Combine decoradores de propriedade com uma função de validação para criar uma pequena biblioteca de validação.
// Decorator records that a field is required:
function Required(target: any, key: string) {
const fields = Reflect.getMetadata('required', target) || [];
Reflect.defineMetadata('required', [...fields, key], target);
}
class User {
@Required name!: string;
@Required email!: string;
}
function validate(obj: any): string[] {
const required: string[] = Reflect.getMetadata('required', obj) || [];
return required.filter(k => obj[k] == null);
}Decoradores Stage 3 (TC39)
Os decoradores padronizados (TS 5.0+, compatíveis com Node 22+ mediante um sinalizador) têm uma assinatura diferente. Eles não precisam do sinalizador experimental nem de reflect-metadata.
Quando usar decoradores
Use decoradores quando o framework oferecer esse recurso (Angular, NestJS, TypeORM). Não crie seus próprios decoradores em código de frontend comum — eles adicionam complexidade e vinculam você a um comportamento específico do ambiente de execução.
Verificação rápida
Quais sinalizadores do tsconfig você precisa ativar para usar decoradores legados (experimentais) com reflexão de metadados?
Recapitulação: decoradores
Decoradores modificam classes, métodos, propriedades e parâmetros no momento da definição. Ative experimentalDecorators + emitDecoratorMetadata. As assinaturas dos decoradores de classe, método, propriedade e parâmetro são diferentes. reflect-metadata armazena metadados; fábricas passam argumentos. Eles são muito usados por Angular, NestJS e TypeORM. Os decoradores Stage 3 (TS 5+) são o futuro e não precisam de sinalizadores.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 41
- Aulas
- 163
Perguntas Frequentes
A aula “Decoradores e metadados” é grátis?
Sim — o texto completo de “Decoradores e metadados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Decoradores e metadados”?
Ativar decoradores experimentais, escrever decoradores de classes, métodos e propriedades e utilizar reflect-metadata em padrões de injeção de dependências. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Decoradores e metadados”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Tipos de literais de modelo
- Decoradores e metadados
- TypeScript com React: genéricos, FC e hooks
- Modo estrito e eliminação de any