未考虑到数组元素可能返回undefined的情况的Typescript代码
P粉824889650
2023-08-24 12:15:44
<p>以下代码在Typescript类型检查器（v2.9.1）中通过，但在运行时抛出<code>TypeError</code>。</p>
<pre class="brush:php;toolbar:false;">interface Item { id: string }
const list: Item[] = [{ id: 'a' }, { id: 'b' }];
const item = list[3]; // 类型: Item
const itemId = item.id; // 类型: string</pre>
<p>考虑到访问类型化数组中的元素可能始终返回<code>undefined</code>，<code>item</code>应该是<code>item: Item | undefined</code>，这将强制你进行空值检查，难道不应该吗？</p>
<p>更令我惊讶的是，以下代码也通过类型检查：</p>
<pre class="brush:php;toolbar:false;">const item2: Item | undefined = list[3];
const item2Id = item2.id;</pre>
<p>尽管将返回值强制转换确实会导致类型检查失败：</p>
<pre class="brush:php;toolbar:false;">const item3 = list[3] as Item | undefined;
const item3Id = item3.id; // [ts] Object is possibly 'undefined'.</pre>
<p>创建一个显式类型的访问器函数也可以捕获到<code>undefined</code>的情况，但会增加不必要的开销：</p>
<pre class="brush:php;toolbar:false;">const getItem1 = (index: number, items: Item[]): Item | undefined => items[index];
const item3 = getItem1(3, list);
const item3Id = item3 && item3.id;</pre>
<p>这是Typescript的已知限制吗？有没有推荐的模式或库来处理这种情况？</p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
这是有意的行为。 在TypeScript GitHub存储库上查看此问题的长时间讨论
你的
strictNullChecks关闭了；尝试打开它。TS 4.1更新：
TypeScript 4.1引入了一个
--noUncheckedIndexedAccess编译器标志，实现了在microsoft/TypeScript#13778中提出的建议，以考虑这种情况下的undefined。请注意，该功能不会作为--strict编译选项集的一部分启用，并且被称为“严格的索引签名”，因为它会在程序员可能不希望或期望的情况下发出关于undefined的警告。TS4.1之前的回答：
您已经发现索引签名不会像可选属性那样将
| undefined添加到元素类型中。在microsoft/TypeScript#13778上提出了创建一个编译器选项来实现这一点的建议。您可以阅读该建议中的评论；它们链接到其他问题，但共识是高错误率几乎使其无用。还提到您可以手动将
| undefined添加到元素类型中：const list: (Item | undefined)[] = [{ id: 'a' }, { id: 'b' }];这将按您的预期工作，而不会影响整个语言。