TypeScript 装饰器提供了强大的元编程能力,可以用于:
- 日志记录
- 性能测量
- 依赖注入
- 验证
- 访问控制
- 自动序列化/反序列化
- ORM 映射
装饰器目前仍然是实验性特性,但已经被许多流行框架(如 Angular、NestJS)广泛使用。
最好的文档还是官方文档:www.tslang.cn/docs/handbo… 需要耐心看完,才能有个简要认知。
装饰器基础
装饰器是一种特殊的声明,可以附加到类声明、方法、访问器、属性或参数上。装饰器使用 @expression 形式,其中 expression 必须求值为一个函数,该函数会在运行时被调用。
启用装饰器
在 tsconfig.json 中启用实验性装饰器支持:
json
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}
装饰器类型
1. 类装饰器
类装饰器应用于类构造函数,可以用来观察、修改或替换类定义。
2. 方法装饰器
方法装饰器应用于方法的属性描述符,可以用来观察、修改或替换方法定义。
3. 访问器装饰器
访问器装饰器应用于访问器的属性描述符,可以用来观察、修改或替换访问器的定义。
4. 属性装饰器
属性装饰器应用于类的属性。
5. 参数装饰器
参数装饰器应用于构造函数或方法参数。
装饰器执行顺序
不同类型的装饰器按以下顺序执行:
- 参数装饰器,然后是方法、访问器或属性装饰器应用到每个实例成员
- 参数装饰器,然后是方法、访问器或属性装饰器应用到每个静态成员
- 参数装饰器应用到构造函数
- 类装饰器应用到类
装饰器工厂
如果你想自定义装饰器如何应用于声明,可以写一个装饰器工厂。装饰器工厂就是一个简单的函数,它返回装饰器运行时调用的表达式。
typescript
function color(value: string) {
// 这是一个装饰器工厂
return function (target: any) {
// 这是装饰器
// 用相关逻辑做一些事情
target.color = value;
};
}
@color("red")
class Circle {}
console.log(Circle.color); // 输出: "red"