Reactjs 映射2种不同类型的TypeScript数组，并对仅存在于一种类型上的属性设置条件？

我有

A

和

B

类型的对象<代码>项是

A

和

B

的数组。此代码适用于：

type A = {
    foo: string;
    isB: false;
}

type B = {
    bar: string;
    isB: true;
}

type Items = (A | B)[];


const myItems: Items = [
    {
        foo: 'First string';
        isB: false;
    },
    {
        bar: 'Second string';
        isB: true;
    }
]


myItems.map((item, index)=>{
    if(item.isA) {
        return <ComponentA key={index} {...item} />
    }
    return <ComponentB key={index} {...item} />
})

但是，我得到一个错误：

类型“A”上不存在属性“isRest”

您可以使用将并集缩小到特定类型：

myItems.map((item, index)=>{
    if('isB' in item) {
        return <ComponentB key={index} {...item} />
    }
    return <ComponentA key={index} {...item} />
})

myItems.map（（项目，索引）=>{
如果（项目中的“isB”）{
返回
}
返回
})

您可以使用将联管节缩小到特定类型：

myItems.map((item, index)=>{
    if('isB' in item) {
        return <ComponentB key={index} {...item} />
    }
    return <ComponentA key={index} {...item} />
})

myItems.map（（项目，索引）=>{
如果（项目中的“isB”）{
返回
}
返回
})

---

isA？isB？isRest？能否包括组件A和组件的代码ComponentB@Aleksey请不要单方面更改OP的代码，我们不知道哪些位正确，哪些位不正确。

if（item.isA）

在这两种情况下都是错误的。您阅读了吗？这显示了在unions.isA中区分类型的各种选项？isB？isRest？能否包括组件A和组件的代码ComponentB@Aleksey请不要单方面更改OP的代码，我们不知道哪些位正确，哪些位不正确。

if（item.isA）

在这两种情况下都是错误的。您阅读了吗？这显示了区分联合中类型的各种选项。