TS 5.0 Beta：新版装饰器来了！

欢迎你阅读 「《重学 TypeScript 3.0》」 系列教程，本系列教程会包含 TypeScript 基础知识、进阶知识、类型体操（精选）、设计模式、核心特性实战和开源项目源码解析 「6」 大专题的内容。

上个月 1 月 26 号 TypeScript 团队发布了 「TypeScript 5.0 Beta」 版，该版本带来了很多新的特性，其中就包含了新的 ECMAScript 装饰器特性。TypeScript 新版本对 Stage 3 装饰器提案^[1]进行了实现，本文阿宝哥将带大家一起学习「新版 ES 装饰器」的众多新特性。

装饰器主要有 Class Decorators、Property/Field Decorators、Method Decorators 和 Parameter Decorators 4 种。不同装饰器有不同的应用场景，如果你对 TypeScript 5.0 Beta 版本之前的装饰器还不了解的话，可以阅读 "搞懂 TypeScript 四种装饰器" 这篇文章。

装饰器的本质是一个函数，新版装饰器的定义如下：

type Decorator = (value: Input, context: {
  kind: string;
  name: string | symbol;
  access: {
    get?(): unknown;
    set?(value: unknown): void;
  };
  private?: boolean;
  static?: boolean;
  addInitializer?(initializer: () => void): void;
}) => Output | void;

由以上代码可知，新版装饰器函数支持 value 和 context 两个参数。 Input 和 Output 分别表示 value 输入参数的类型和函数返回值的类型。每种类型的装饰器都有不同的输入和输出，而 context 对象的值也是取决被装饰的对象，context 对象的相关说明如下：

• kind：装饰值的类型，可以用来确保装饰器被正确使用。它的值可能是 "class"、"method"、"getter"、"setter"、"field" 或 "accessor"。
• name：被装饰值的名称，比如类名、属性名或方法名。
• access：一个对象包含访问该值的 get 和 set 方法。
• private：该值表示是否为私有类成员。
• static：该值表示是否为静态类成员。
• addInitializer：允许用户添加额外的初始化逻辑。

上面的 addInitializer 方法允许我们添加自定义的初始化逻辑，来实现相应的功能。比如，自定义一个方法装饰器，实现为类中的某个方法绑定 this 对象的功能。有关 addInitializer 方法的相关内容，阿宝哥将在后面的部分单独介绍它，接下来我们先来搭建新版装饰器的本地开发环境。

mkdir es-decorator
npm init -y
npm install typescript@beta -D

以上命令成功执行后，将会新建一个 「es-decorator」 目录并安装 「typescript@beta」 依赖。搭建好开发环境，接下来我们先来介绍类装饰器。

❝

提示：Android 平台 1 元 10 个微豆，iOS 平台 1 元 7 个微豆，购买时可切换平台充值。

❞