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

Question

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

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

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

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

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

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

score 1 · Accepted Answer

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

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

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

相反，对于 A：

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

由于该foo属性在此处是可选的，因此不确定是否存在（对于 Typescript），因此?.可能导致找不到任何属性并undefined成为结果。

您可以通过在对象值类型中交替使用来明确并非所有属性B都必须具有对象：barundefined

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

导致bb输入为number | undefined.

1 回答 1