具有索引签名的接口的可选链接

【问题标题】：Optional chaining for interfaces that have an index signature具有索引签名的接口的可选链接
【发布时间】：2020-07-12 17:15:17
【问题描述】：

我定义了两个接口。第一个有一个可选字段，第二个有一个索引签名：

interface A {
  foo?: { bar: number };
}

interface B {
  [s: string]: { bar: number };
}

为什么当我使用可选链接访问属性时，第一个接口给我一个number | undefined 类型的结果，而第二个接口只给我number 类型的结果？

const a: A = {};
const aa = a.foo?.bar;
// const aa: number | undefined

const b: B = {};
const bb = b.foo?.bar;
// const bb: number

【问题讨论】：

【解决方案1】：

因为B被[s: string]索引，它认为任何有效的字符串键都会导致{ bar: number }的值被访问。所以，与

const b: B = {};
const bb = b.foo?.bar;

它认为foo 属性将永远存在——它永远不会失败并通过可选链接变成undefined。

相比之下，A 的：

interface A {
  foo?: { bar: number };
}

由于 foo 属性在这里是可选的，它不肯定存在（对于 Typescript），所以 ?. 可能导致找不到任何属性，undefined 是结果。

您可以通过在对象值类型中与undefined 交替使用来明确B 上的所有属性都不一定具有bar 对象：

interface B {
  [s: string]: { bar: number } | undefined;
}

导致bb 被输入为number | undefined。

【讨论】：