TypeScript接口可选对象解构类型报错的解决方法

针对你遇到的问题，这里有几种实用的解决方式：

1. 给可选属性设置解构默认值 #

在解构link时，为它指定一个默认的空对象（或符合Link类型的默认值），这样即使link是undefined，也不会因为访问不存在的属性报错：

// 用空对象做默认值，此时href、text会是undefined
const {
  link: { href, text } = {}
} = varOfTypeContainer;

// 或者指定具体默认值，让href、text有确定的类型
const {
  link: { href = '', text = '' } = {}
} = varOfTypeContainer;

2. 先判断可选属性存在再解构 #

通过空值检查确保link存在后再解构，这种方式能保证类型安全，还能处理link不存在的逻辑：

if (varOfTypeContainer.link) {
  const { href, text } = varOfTypeContainer.link;
  // 在这里安全使用href和text
}

// 或者用可选链单独提取属性
const href = varOfTypeContainer.link?.href;
const text = varOfTypeContainer.link?.text;

3. 非空断言（谨慎使用） #

如果你能100%确定varOfTypeContainer的link属性一定存在，可以用非空断言!告诉TypeScript忽略undefined的情况，但注意如果运行时link实际是undefined，会抛出错误：

const {
  link!: { href, text }
} = varOfTypeContainer;

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