TypeScript中object类型属性重赋值为string报错如何解决

错误信息 #

Type 'string' is not assignable to type '{ title: { value: string; }; }'.

复现代码 #

const temp= {
  type: {
      title: {
          value: "text"
      }
  }
}

temp.type = temp.type.title.value

操作参考截图：

报错原因 #

TypeScript会根据变量初始化值自动推导变量类型，上述代码中temp初始化时，type属性被推导为嵌套对象类型{ title: { value: string } }，后续给该属性赋值不符合推导类型的字符串时，就会触发类型校验错误。

解决方法 #

• 方法1：给temp显式声明类型，定义type为联合类型，同时兼容初始对象和后续要赋值的字符串类型

const temp: {
  type: { title: { value: string } } | string
} = {
  type: {
    title: {
      value: "text"
    }
  }
}
// 赋值正常，不会报错
temp.type = temp.type.title.value

这是最推荐的写法，既保留TS的类型校验能力，也符合代码实际运行时的类型变化。

• 方法2：使用类型断言跳过类型校验
  如果不需要对该字段做严格类型检查，可以在赋值时用as any做类型断言绕开校验：

const temp= {
  type: {
      title: {
          value: "text"
      }
  }
}

temp.type = temp.type.title.value as any

注意：该写法会丢失temp.type后续的类型提示，非特殊场景不建议使用

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