TypeScript如何让interface属性同时支持Data类型与undefined赋值？

问题原因及解决方法 #

第一步：修正现有代码的语法&属性匹配错误 #

你当前的代码存在两处基础错误，会直接导致类型校验不通过：

1. 常量赋值缺少等于号，TS 中给变量加类型注解后赋值需要加=
2. Detail 接口定义的属性名为detail，但你导出的Profile对象里写的属性名是profile，二者完全不匹配
   修正后的基础代码如下：

interface Data {
   name: string,
   address: string
}

interface Detail {
   // 这里属性名和后续实例属性保持一致，改为profile
   profile: Data | undefined
}

// 类型注解后加=完成赋值
export const Profile: Detail = {
   profile: undefined
}

第二步：确认TS配置项 #

上述代码本身就支持profile属性赋值为Data类型或者undefined，如果你还是赋值失败，检查tsconfig.json的以下配置即可：

• 确认没有开启exactOptionalPropertyTypes同时把属性写成了可选写法profile?: Data：如果开启了这个配置，可选属性默认不允许手动赋值为undefined，只能缺省，你显式写联合类型Data | undefined就不受这个配置影响
• 确认strictNullChecks没有被设置为false：如果关闭了空值校验，TS 会默认忽略undefined类型的校验，反而可能出现意料之外的类型提示错误，建议保持开启

验证赋值效果 #

修改完成后可以测试以下赋值操作，都是符合类型要求的：

// 赋值为Data类型
Profile.profile = { name: "张三", address: "北京市" }
// 重新赋值为undefined
Profile.profile = undefined

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