TypeScript装饰器新增属性/方法不被识别的解决方法咨询

这个问题我碰到过好多次了——TypeScript编译时没法感知到装饰器在运行时给类添的方法，所以才会报类型错误。下面给你几个靠谱的解决办法，从优雅到临时应急的都有：

1. 声明合并（最推荐） #

利用TypeScript的声明合并特性，提前给类定义一个同名接口，把装饰器要添加的方法写在接口里。这样TS会自动合并类和接口的类型，识别到新增的方法：

// 先声明同名接口，定义装饰器要添加的方法类型
interface Test {
  method(): void;
}

function decorator(target: typeof Test) {
  target.prototype.method = function() { 
    console.log('这是装饰器添加的方法');
  };
}

@decorator
class Test {
  constructor() {
    this.method(); // 现在TS不会再报错啦
  }
}

这个方法的优势是一次性全局解决类型问题，所有用到Test类的地方都能自动识别method方法，非常优雅。

2. 类型断言（临时应急） #

如果只是个别地方需要调用这个方法，不想改全局类型，可以用类型断言强制告诉TS这个方法存在：

function decorator(target) {
  target.prototype.method = function() {};
}

@decorator
class Test {
  constructor() {
    // 断言当前实例包含method方法
    (this as Test & { method: () => void }).method();
  }
}

缺点是每次调用都要写断言，代码会有点冗余，适合临时场景或者小范围使用。

3. 泛型装饰器返回增强类型 #

让装饰器返回一个继承原类的新类，并显式定义新增方法的类型，这样TS会自动推导增强后的类类型：

// 泛型装饰器，接收原类并返回带新增方法的子类
function decorator<T extends new (...args: any[]) => any>(target: T) {
  return class extends target {
    method() {
      console.log('装饰器添加的方法');
    }
  };
}

// 用变量接收装饰后的类，TS会自动识别method方法
const Test = decorator(class {
  constructor() {
    this.method(); // 无类型错误
  }
});

这种方式适合需要动态生成增强类的场景，不过要注意原来的类定义写法会有变化（用变量接收而不是直接用class关键字加装饰器）。

为什么会出现这个问题？ #

本质是TypeScript的类型检查是编译时静态分析，而装饰器是在运行时动态修改类原型，所以编译时TS并不知道你会给类添新方法，自然会报类型错误。上面的方法都是通过TypeScript的类型系统特性，提前告诉编译器这些方法的存在。

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