TypeScript对象扩展仅识别首次添加属性，访问后续属性报错如何解决？

问题复现代码 #

const obj = {
  num1 : 'string',
}
const obj2 = {
  num2 : 1234
}
let a = {
  ...obj,
}
a = {
  ...a,
  ...obj2,
}
a.num1 // ok
a.num2 // error

成因 #

这个问题是TypeScript静态类型推断的特性导致的，不属于运行时错误：

• 第一次给变量a赋值时，TS会根据赋值内容自动推断a的类型为{ num1: string }，该类型定义里仅包含num1属性
• 由于TS的结构类型兼容性规则，多属性的对象可以赋值给少属性的类型，因此第二次给a赋值包含obj2扩展属性的对象时，不会触发赋值报错，但TS也不会自动更新a的已推断类型，默认仍认为a只有num1属性
• 访问a.num2时，静态类型检查发现类型定义中没有该属性，就会抛出类型错误，实际上运行时a是真实存在num2属性的。

修复方案 #

方案1：一次性构建对象（优先推荐） #

如果业务逻辑允许，直接一次性完成对象的扩展赋值，TS可以自动识别所有属性的类型，无需额外声明：

const a = {
  ...obj,
  ...obj2
}
a.num1 // 类型校验正常
a.num2 // 类型校验正常

方案2：显式声明变量a的类型 #

如果必须分步骤构建对象，可以提前声明a的完整类型，也可以通过交叉类型复用已有对象的类型定义，避免手动重复编写属性：

// 用交叉类型直接复用obj和obj2的类型，哪怕是复杂对象也能直接推导
type AType = typeof obj & typeof obj2
let a: AType = { ...obj }
a = {
  ...a,
  ...obj2
}
a.num2 // 类型校验正常

方案3：使用类型断言适配动态场景 #

如果obj和obj2的结构是动态不固定的，可以用类型断言告诉TS该对象的属性是动态的：

let a = { ...obj } as Record<string, any>
a = {
  ...a,
  ...obj2
}
a.num2 // 不会触发类型报错

注意：该方案会丢失静态类型校验能力，非特殊场景不推荐使用。

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