如何在Reactjs typescript中给出两个类型作为输入道具的联合类型

Question

我正在react js中开发一个独立的组件

我有这两个属性作为该组件的输入，我正在将这些输入数据转换为常规数组并在UI中显示它们。实际上，任何属性都可以作为这个组件的输入。如果data1存在，那么我想取data1并处理它。否则为data2。但在同一时刻，两个输入是不存在的。这是必须的。

data1: MyObject<string, Type1>;
data2: MyObject<string, Type2>;

Type1结构如下所示

{
x: string;
propA: 'a' | 'b' | 'c';
y: string;
etc: ...
}

类型2结构看起来像这样

{
x: string;
propB: 'a' | 'b' | 'c';
y: string;
etc: ...
}

我有一个方法，它接受两种类型作为联合，我需要处理数据，如果我的输入是类型1，那么我将接受类型object属性并处理它，否则我需要接受类型2属性并处理它。

private convertBannerToMessage(message: Type1 | Type2): void {
const msg = { ...message };
const msgType = msg.propA ?? msg.propB;
switch (msgType) {
case X:
return this.processData(msg);
case Y:
return this.processData(msg);
case Z:
return this.processData(msg);
default:
return null;
}
}

访问propA或prob属性时出现错误。

Property 'propA' does not exist on type '{ id: string; propA: "a" | "b" | "c"; 

Answer 1

您可以创建一个函数来检查msg是Type1/Type2的实例，如下所示:

function instanceOf<T> (object: any, prop: string): object is T {
return prop in object;
};

const msgType = instanceOf<Type2>(msg, "template") ? msg.template : msg.messageType;