如何在 TypeScript 中映射多种类型的数组？

Question

如果我有一个变量，它的类型是一个可以采用多种类型的数组……

type myData = (RedType | BlueType)[];
//`const data` is of type myData

我正在对类型进行手动检查，并有条件地对变量数据执行一些逻辑......

     {data.map((element, index) => {
        if (isRed(element)) {
          return <Red data={element} key={index} />;
        } else {
          return <Blue data={element} key={index} />;
        }
      })}

如您所见，我正在映射数组，如果它是 RedType，则返回一个 Component，并为 BlueType 返回其他内容。

但是，打字稿不喜欢这样，它不知道我正在手动执行条件。 所以它错误：

type ‘RedType | BlueType’ is not assignable to type ‘RedType’.  

反之亦然。

我将始终拥有多个类型的数组，我无法更改。

Answer 1

您可能希望您的isRed()函数是用户定义的类型保护。 也就是说，将其签名更改为类似

declare function isRed(x: any): x is RedType;

并且您的代码应该开始编译而不会出错。 希望有所帮助； 祝你好运！