如何用TypeScript在类构造函数中动态设置实例属性并获得正确类型提示

实现方案 #

这个需求完全可行，且可以通过泛型完美实现，代码如下：

class MyClass<T extends object> {
  // 可在这里自定义类本身的自有方法/属性
  public printAllProps() {
    console.log(this)
  }

  constructor(props: T) {
    // 动态把入参的所有属性挂载到实例上
    Object.assign(this, props)
  }
// 修改构造函数返回类型，合并入参类型和类本身的类型
} as {
  new <T extends object>(props: T): MyClass<T> & T
}

效果验证 #

你给出的使用示例可以正常运行，类型识别完全符合预期：

const myInstance = new MyClass({
  someField: 'foo'
})

// TypeScript会正确识别myInstance.someField为string类型
console.log(myInstance.someField) // 输出foo
// 类本身的方法也可以正常调用，类型识别无错误
myInstance.printAllProps()

原理解释 #

• 首先用泛型T捕获构造函数入参的完整类型，包括所有字段名和对应的类型
• 构造函数内部通过Object.assign把入参的所有属性动态挂载到类实例上
• 最后通过类型断言修改类的构造签名，让返回的实例类型是类本身类型和入参类型的交叉类型，这样TypeScript就能同时识别到类的自有成员和动态挂载的属性类型

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