从JS迁移至TS时联合类型对象解构属性不存在报错的解决方法

报错根源 #

TypeScript 对联合类型a | b的属性访问规则为：仅允许访问两个成员类型的共有属性。示例中name/lastName仅在a中定义、email/phone仅在b中定义，无共有属性，因此直接解构非共有属性时TS会触发静态校验报错，即便后续代码会处理undefined也无法跳过这步校验。

对应解决方法（按适用场景排序） #

方法1：合并为全可选类型定义（最适配你已处理空值的场景） #

由于你已经在后续代码兼容了属性不存在的情况，可直接将原联合类型的所有属性合并为一个全可选的对象类型，不需要保留原联合的强约束：

// 合并所有可能的属性，统一设置为可选
type Options = {
  name?: string 
  lastName?: string 
  email?: string 
  phone?: number
}

const options: Options = {email: 'itzrahulpatel@outlook.com'}

// 解构无报错，TS会自动将不存在的属性识别为undefined类型
const { email, phone, name, lastName } = options

注意：该方式会取消「对象只能是a或b类型、不能同时出现两边属性」的限制，如果业务需要保留该约束，请选择下面的方法。

方法2：类型断言临时兼容（老代码迁移最快方案） #

如果不想改动原有联合类型的定义，仅需要快速通过校验，可将对象断言为「保留原联合结构、所有属性均为可选」的类型：

interface a {
 name?: string 
 lastName?: string 
}
interface b {
 email?: string 
 phone?: number 
}

const options = {email: 'itzrahulpatel@outlook.com'} as (a | b) & {
  name?: string
  lastName?: string
  email?: string
  phone?: number
}

// 解构无报错
const { email, phone, name, lastName } = options

方法3：类型守卫+空值补全（保留严格类型约束的最佳实践） #

如果业务需要严格限制对象只能是a或b类型，不能同时出现两边的属性，可先通过in操作符做类型判断，再补全缺失属性后解构：

interface a {
 name?: string 
 lastName?: string 
}
interface b {
 email?: string 
 phone?: number 
}

const options: a | b = {email: 'itzrahulpatel@outlook.com'}

// 通过in操作符判断类型，展开后补全缺失属性为undefined
const normalizedOptions = {
  ...('email' in options ? options : {}),
  ...(!('email' in options) ? options : {})
}

// TS会识别所有属性为可选，解构无报错
const { email, phone, name, lastName } = normalizedOptions

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