如何为我的联合类型创建Typescript类型保护

Question

我有以下类型的Typescript:

export type TeaserOne = { __typename: 'TeaserOne' } & TeaserOneItem;
export type TeaserTwo = { __typename: 'TeaserTwo' } & TeaserTwoItem;
export type TeaserThree = { __typename: 'TeaserThree' } & TeaserThreeItem;
export type Teaser = TeaserOne | TeaserTwo | TeaserThree;
export type FilteredTeasers = Exclude<Teaser, TeaserThree >;
export type TeaserItem = TeaserOneItem | TeaserTwoItem | TeaserThreeItem;
For example the item types looks a bit like:
// TeaserOneItem:
export interface TeaserOneItem {
type: string;
id: string;
title: string;
lead?: string;
}
// TeaserTwoItem:
export interface TeaserTwoItem {
type: string;
id: string;
title: string;
duration?: string;
image?: Image;
}

在某个React组件中，我需要创建一个Typescript类型保护:

const filteredItems = data.items?.filter(
(item) =>
item?.__typename.includes('TeaserOne') || item?.__typename.includes('TeaserTwo')
);
// -->  Maybe also I can refactor above with a type guard, but how exactly?
{filteredItems.map((node, index) => {
if (isTeaserOne() // <-- Here I want to use a type guard) {
const teaserOne = node as TeaserOneType;
return (
<TeaserOne
key={teaserOne.id}
title={teaserOne.title}
lead={teaserOne.lead}
/>
);
}
const teaserTwo = node as TeaserTwoType;
return (
<TeaserTwo
key={teaserTwo.id}
title={teaserTwo.title}
image={teaserTwo.image}
/>
);
})}

我如何创建一个漂亮和干净的类型保护函数isTeaserOne()?到目前为止，我有:

const isTeaserOne = (teaser: TeaserItem): teaser is TeaserOneItem =>
typeof teaser === 'object' && teaser.type.includes('TeaserOne');

但是我必须如何使用它呢?或者我必须重构上面的类型保护函数吗?

Answer 1

在你的代码isTeaserOne = (teaser: Teaser)使用Teaser类，所以有__typename属性，你可以直接使用它

const isTeaserOne = (teaser: Teaser): teaser is TeaserOne => teaser.__typename === 'TeaserOne';
const isTeaserTwo = (teaser: Teaser): teaser is TeaserTwo => teaser.__typename === 'TeaserTwo';
const isTeaserThree = (teaser: Teaser): teaser is TeaserThree => teaser.__typename === 'TeaserThree';


filteredItems.map((node) => {
// here typeof node is Teaser 
if (isTeaserOne(node)) { 
// here typeof node is TeaserOne
<TeaserOne />
}
if (isTeaserTwo(node)) {
// here typeof node is TeaserTwo
<TeaserTwo />
}
if (isTeaserThree(node)) { 
// here typeof node is TeaserThree
<TeaserThree />
}
return "nothing";
})

实际上，假设你的代码是不完整的，因为实际上你在这里不需要类型保护。一个简单的

if (node.__typename === "TeaserOne") { 
// here typeof node is TeaserOne
<TeaserOne />
}

也会得到相同的结果。