TypeScript中如何通过Object.assign或循环动态赋值类属性

报错原因 #

TypeScript 是静态类型检查语言，无法自动识别通过Object.assign或循环在构造函数内动态挂载的实例属性，因此即使运行时实例确实存在a、b、r三个属性，编译阶段仍然会抛出未实现接口的错误。不管是用Object.assign还是循环遍历对象为this动态赋值，下述解决方案都适用。

解决方案 #

• 方案1：显式声明类属性（最推荐，可维护性最高）
  直接在类中声明接口要求的所有属性，既符合TS的类型检查规则，也能明确类的成员结构：

interface Foo {
    b: string
    a: string
    r: number
}

class Example implements Foo {
    // 非空断言告知TS该属性会在构造函数中被赋值，无需初始化
    b!: string
    a!: string
    r!: number

    constructor(ref: Foo) {
        Object.assign(this, ref)
    }
}

• 方案2：使用类型断言跳过显式属性声明
  如果属性数量过多不想逐个声明，可以通过类型断言告知TS该类的实例符合Foo接口要求，适合快速迭代的场景：

interface Foo {
    b: string
    a: string
    r: number
}

// 断言构造函数返回的实例类型符合Foo接口
const Example = class Example {
    constructor(ref: Foo) {
        Object.assign(this, ref)
    }
} as new (ref: Foo) => Foo

• 方案3：使用declare修饰符（TS 3.7及以上版本支持）
  用declare标记属性，告知TS这些属性会在运行时被初始化，不需要校验初始化逻辑，语法更简洁：

interface Foo {
    b: string
    a: string
    r: number
}

class Example implements Foo {
    declare b: string
    declare a: string
    declare r: number

    constructor(ref: Foo) {
        Object.assign(this, ref)
    }
}

注意事项 #

使用类型断言跳过显式声明的方案，需要自行保证构造函数传入的ref参数一定包含Foo接口要求的所有属性，否则运行时会出现属性缺失的问题。

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