如何在TypeScript中为类动态添加装饰器？

你猜的完全没错——装饰器本质就是个函数，TypeScript完全支持通过条件逻辑手动调用装饰器，来实现编译时决定是否应用的效果。下面给你具体的实现方案：

1. 直接手动调用装饰器（最直观的方式） #

类装饰器的核心逻辑就是接收类的构造函数作为参数，所以你完全可以先定义类，再根据环境变量条件调用装饰器函数，和用@语法是等价的——毕竟@MyDecorator class X {}本质就是TypeScript提供的语法糖，编译后会被转成MyDecorator(X)。

示例代码：

// 先定义你的装饰器
function MyDecorator(target: Function) {
  console.log(`Applied decorator to ${target.name}`);
  // 这里写装饰器的实际逻辑，比如给类添加方法/属性
  target.prototype.myDecoratedMethod = () => "Hello from decorator!";
}

// 定义你的类
export default class MyClass extends BaseClass {}

// 编译时条件判断：只有当DECORATE为真时才应用装饰器
if (process.env.DECORATE === 'true') {
  MyDecorator(MyClass);
}

2. 封装成条件装饰器（更优雅的写法） #

如果想保持装饰器的语法风格，可以封装一个辅助装饰器，内部帮你做条件判断：

// 封装一个条件装饰器工厂
function ConditionalDecorator(decorator: ClassDecorator) {
  return function(target: Function) {
    // 编译时判断是否应用目标装饰器
    if (process.env.DECORATE === 'true') {
      decorator(target);
    }
  };
}

// 使用方式和普通装饰器一致
@ConditionalDecorator(MyDecorator)
export default class MyClass extends BaseClass {}

关键注意事项 #

（1）TypeScript配置 #

要确保你的tsconfig.json启用了装饰器相关选项：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true, // 可选，如果你需要反射元数据的话
    "target": "ES6" // 或更高版本，支持类语法
  }
}

（2）编译时环境变量替换 #

TypeScript本身不会处理process.env，所以要确保你的构建工具（比如Webpack、Vite、Rollup）在编译时把process.env.DECORATE替换成实际的布尔值，这样条件判断会被优化（比如当值为false时，装饰器调用代码会被Tree-shaking移除）。

举个Webpack的配置例子：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.DefinePlugin({
      'process.env.DECORATE': JSON.stringify(process.env.DECORATE)
    })
  ]
};

这样就能完全实现你想要的“编译时决定是否添加装饰器”的效果了。

内容的提问来源于stack exchange，提问作者Johannes