typescript - TypeScript混淆错误 'Object is possibly ' undefined'和 'Property ' length'在类型上不存在

Question

我对TypeScript有点陌生，只是将其功能添加到了我的React应用程序中。所以我遇到了两个令人困惑的错误:

最后一个“数据[card.key]”上的“对象可能是'未定义'”

“类型'string | any [] | IPerson'上不存在属性'length'”

我有以下代码:

const filteredCards = cards.filter(card => (card.allData || (data[card.key] && data[card.key].length)))

第一个错误很奇怪，因为我使用以前的检查来解决此问题(如果它是'undefined'，那就是过滤方法用于过滤该卡)。
至于第二个错误，这是要检查此卡是否为阵列并且它不是空的。
在“数据”界面中，我说过:

[key: string]: string | IPerson | Array<any> | undefined

因此，编译器告诉我“data [card.key]”可能不是数组或字符串，因此没有长度。但这没关系，它只会返回“undefined”，该卡也将被过滤掉。
无论如何，如果我将此代码更改为更明显的内容，它将正常工作，且不会出现 typescript 错误。

const filteredCards = cards.filter(card => {
    if (card.allData) return true
    const subData = data[card.key]
    if (subData && Array.isArray(subData)) if (subData.length) return true
    return false
})

有人可以向我解释一下，这是什么问题，以便将来避免这种情况？
谢谢你的帮助。

Answer 1

First error is strange, because I use previous check to sort this out...

我怀疑问题出在 data，而不是 data[card.key]。所以你需要 data && data[card.key] &&

So the compiler tells me that "data[card.key]" could be not an array or a string and thus will have no length. But that is ok, it will just return "undefined" and this card will also be filtered out.

这不是静态类型系统的工作方式。是的，这就是JavaScript的工作方式，但是TypeScript的全部目的是尽早发现与类型相关的错误。由于 string和(我猜测是) IPerson没有 length属性，因此除非您缩小类型以淘汰 length和 string，否则不能使用 IPerson。例如: && "length" in data[card.key] && data[card.key].length。
因此，将这两件事结合在一起:

const filteredCards = cards.filter(
    card => card.allData || (data && data[card.key] && "length" in data[card.key] && data[card.key].length)
);

在所有重复的情况下，我可能会将 data[card.key]缓存到一个变量中:

const filteredCards = cards.filter(card => {
    if (card.allData) {
        return true;
    }
    const entry = data && data[card.key];
    return entry && "length" in entry && entry.length;
});