TypeScript如何为伪古典类添加类型注解解决this与new报错

解决方案 #

问题原因 #

两个报错的本质原因是TS无法自动识别普通函数作为构造函数的this类型和构造调用签名，需要手动显式声明：

1. ts(2683)：函数内部this无显式类型标注，TS默认推断为any
2. ts(7009)：函数无构造签名定义，TS不知道它可以被new调用

实现代码 #

首先定义实例类型和构造函数类型：

// 定义Car实例的类型结构
interface Car {
  numWindows: number;
  // 后续新增的实例属性/方法都可以在这里扩展
}

// 定义Car构造函数的类型，包含构造签名和this标注
interface CarConstructor {
  // 构造调用签名：new调用时传入number参数，返回Car实例
  new (numWindows: number): Car;
  // 普通调用的this标注：直接调用时this要求是Car类型
  (this: Car, numWindows: number): void;
}

然后实现构造函数，手动标注this类型并断言为构造函数类型：

const Car = function(this: Car, numWindows: number) {
  this.numWindows = numWindows;
} as CarConstructor;

验证效果 #

实例化调用不会再报错，且实例类型自动推导正确：

const myCar = new Car(4);
console.log(myCar.numWindows); // 类型正确，为number

如果需要添加原型方法，同样给方法的this加标注即可：

Car.prototype.drive = function(this: Car) {
  console.log(`当前车辆有${this.numWindows}扇窗户`);
}

myCar.drive(); // 调用无报错，类型推断正常

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