第9章：装饰器

实验性支持与配置

1. 装饰器的实验性状态

TypeScript 的装饰器功能目前仍处于实验性阶段（截至 TypeScript 5.0+），这意味着：

  • 语法和行为可能在未来版本中发生变更
  • 需要显式启用编译器选项才能使用
  • 部分高级场景（如参数装饰器）可能存在边缘情况

2. 启用装饰器支持

在 tsconfig.json 中必须配置以下选项：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true  // 可选，用于反射元数据
  }
}

3. 装饰器与 ECMAScript 标准

TypeScript 实现的装饰器与 TC39 提案的对应关系：

TypeScript 版本对应的 TC39 提案阶段
1.5+Stage 0 (旧版语法)
5.0+Stage 3 (新版语法)

4. 元数据反射配置

如需使用反射元数据（常见于依赖注入场景），需额外安装库：

npm install reflect-metadata

并在项目入口文件顶部添加：

import "reflect-metadata";

5. 版本兼容性注意事项

不同 TypeScript 版本的装饰器行为差异：

  • 4.x 及以下：使用旧版装饰器语法
  • 5.0+：默认启用新版装饰器语法，可通过 useDefineForClassFields 控制类字段行为

6. Babel 配合使用

如果使用 Babel 转译 TypeScript，需要安装插件：

npm install @babel/plugin-proposal-decorators

配置示例（.babelrc）：

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "2023-05" }]
  ]
}

7. 生产环境建议

对于关键生产项目：

  1. 锁定 TypeScript 版本
  2. 编写完整的装饰器单元测试
  3. 关注 TypeScript 官方博客的装饰器更新公告
  4. 考虑使用装饰器转换工具（如 tsc --watch + babel 组合）

注意：当装饰器正式进入 ECMAScript 标准后，TypeScript 将移除实验性标志，届时配置方式可能发生变化。

Last Updated::