装饰器与元数据编程通过在类、方法等结构上附加行为实现代码复用，结合reflect-metadata库可在运行时读写元数据，常用于依赖注入等场景。
JavaScript 装饰器与元数据编程是现代前端开发中越来越重要的技术，尤其在 TypeScript 和框架如 Angular、NestJS 中广泛应用。它们允许你在类、方法、属性等代码结构上附加额外行为或信息，实现关注点分离和代码复用。下面通过实战角度带你掌握装饰器与元数据的结合使用。
装饰器基础：理解四种常见装饰器类型
装饰器本质上是一个函数，它会在目标被定义时执行，并接收目标的元信息作为参数。TypeScript 支持以下四种装饰器：
- 类装饰器：作用于类构造函数，可用于修改类的行为或替换类定义。
- 方法装饰器：作用于类的方法描述符，可用于拦截调用、添加日志或权限控制。
- 属性装饰器：作用于类的属性声明，常用于依赖注入或标记字段用途。
- 参数装饰器：作用于方法参数，配合元数据可提取参数类型或用途。
启用装饰器需在 tsconfig.json 中开启相关配置：
{
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
使用 reflect-metadata 提供运行时元数据支持
原生 JavaScript 不保留类型信息到运行时，而 reflect-metadata 库填补了这一空白。通过它，你可以在装饰器中存储和读取元数据。
立即学习“Java免费学习笔记（深入）”；
安装依赖：
npm install reflect-metadata --save
在入口文件顶部引入：
import 'reflect-metadata';
示例：为方法添加元数据标签：
function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`Calling "${propertyName}" with arguments:`, args);
return originalMethod.apply(this, args);
};
// 存储元数据
Reflect.defineMetadata('custom:logged', true, target, propertyName);
}
实战：构建简单的依赖注入容器
利用装饰器和元数据，可以实现一个轻量级依赖注入系统。
定义 @Injectable 装饰器标记可注入类：
function Injectable() {
return function (constructor: Function) {
Reflect.defineMetadata('di:injectable', true, constructor);
};
}
定义 @Inject 装饰器标记构造函数参数：
function Inject(token: any) {
return function (target: any, propertyKey: string | symbol, parameterIndex: number) {
let existingTokens = Reflect.getMetadata('di:tokens', target) || [];
existingTokens[parameterIndex] = token;
Reflect.defineMetadata('di:tokens', existingTokens, target);
};
}
简单容器实现：
class Container {
private instances = new Map();
resolve<T>(token: Function): T {
if (this.instances.has(token)) {
return this.instances.get(token);
}
const tokens = Reflect.getMetadata('di:tokens', token) || [];
const dependencies = tokens.map(dep => this.resolve(dep));
const instance = new token(...dependencies);
this.instances.set(token, instance);
return instance;
}
}
使用方式：
@Injectable()
class Logger {
log(msg: string) { console.log(msg); }
}
@Injectable()
class Service {
constructor(@Inject(Logger) private logger: Logger) {}
run() { this.logger.log('Service running'); }
}
注意事项与兼容性
目前装饰器语法仍在提案阶段（Stage 3），不同版本间可能存在差异。TypeScript 默认使用旧版装饰器模型，建议在 tsconfig.json 中明确设置：
"target": "ES2022", "experimentalDecorators": true, "emitDecoratorMetadata": true, "useDefineForClassFields": false
新版装饰器（2023+）语义更清晰，但生态适配仍在进行中。当前 NestJS 等框架仍基于旧模型运作。
基本上就这些。掌握装饰器与元数据组合，能让你写出更具扩展性和可维护性的代码，特别是在构建框架或复杂应用架构时非常有用。
