TypeScript可选类型对象解构属性不存在报错的最佳实践是什么？

报错原因 #

TS抛出Property 'name' does not exist on type 'Child | undefined'.(2339)错误的核心原因是：你在Parent接口中定义的person是可选属性，实际类型为Child | undefined，TypeScript不允许直接对可能为undefined的值做属性解构。
另外你的示例代码存在语法笔误：variable数组的第二个元素末尾缺少闭合的}，修正后为{person: {name: 'amazon', phone: 1234}}。

常用最优解决方案 #

方案1：解构时指定兜底默认值（最简洁） #

适合person不存在时可以用默认值兜底的场景，无需额外分支判断：

// 写法1：参数解构时直接指定默认值
variable.map(({ person = { name: '默认名称', phone: 0 } }) => {
    const { name, phone } = person
    // 后续业务逻辑
})

// 写法2：用空值合并运算符兜底，无需修改参数
variable.map(({ person }) => {
    const { name, phone } = person ?? { name: '默认名称', phone: 0 }
    // 后续业务逻辑
})

方案2：先做类型窄化再解构（类型安全性最高） #

适合需要单独处理person为undefined的场景，无类型断言，完全符合TS类型校验规则：

variable.map(({ person }) => {
    // 先判断person是否存在，TS会自动将后续作用域中的person类型窄化为Child
    if (!person) {
        // 自定义person不存在时的逻辑，比如返回默认值、抛出异常等
        return
    }
    const { name, phone } = person
    // 后续业务逻辑
})

方案3：可选链分步取值（灵活度最高） #

如果不需要一次性解构所有属性，可选链配合空值合并运算符的写法更加灵活：

variable.map(({ person }) => {
    const name = person?.name ?? '默认名称'
    const phone = person?.phone ?? 0
    // 后续业务逻辑
})

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