Typescript的装饰器简介

48 阅读2分钟

TypeScript 装饰器提供了强大的元编程能力,可以用于:

  • 日志记录
  • 性能测量
  • 依赖注入
  • 验证
  • 访问控制
  • 自动序列化/反序列化
  • ORM 映射

装饰器目前仍然是实验性特性,但已经被许多流行框架(如 Angular、NestJS)广泛使用。

最好的文档还是官方文档:www.tslang.cn/docs/handbo… 需要耐心看完,才能有个简要认知。

装饰器基础

装饰器是一种特殊的声明,可以附加到类声明、方法、访问器、属性或参数上。装饰器使用 @expression 形式,其中 expression 必须求值为一个函数,该函数会在运行时被调用。

启用装饰器

在 tsconfig.json 中启用实验性装饰器支持:

json

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

装饰器类型

1. 类装饰器

类装饰器应用于类构造函数,可以用来观察、修改或替换类定义。

2. 方法装饰器

方法装饰器应用于方法的属性描述符,可以用来观察、修改或替换方法定义。

3. 访问器装饰器

访问器装饰器应用于访问器的属性描述符,可以用来观察、修改或替换访问器的定义。

4. 属性装饰器

属性装饰器应用于类的属性。

5. 参数装饰器

参数装饰器应用于构造函数或方法参数。

装饰器执行顺序

不同类型的装饰器按以下顺序执行:

  1. 参数装饰器,然后是方法、访问器或属性装饰器应用到每个实例成员
  2. 参数装饰器,然后是方法、访问器或属性装饰器应用到每个静态成员
  3. 参数装饰器应用到构造函数
  4. 类装饰器应用到类

装饰器工厂

如果你想自定义装饰器如何应用于声明,可以写一个装饰器工厂。装饰器工厂就是一个简单的函数,它返回装饰器运行时调用的表达式。

typescript

function color(value: string) {
  // 这是一个装饰器工厂
  return function (target: any) {
    // 这是装饰器
    // 用相关逻辑做一些事情
    target.color = value;
  };
}

@color("red")
class Circle {}

console.log(Circle.color); // 输出: "red"