如何为 ReactElement 类型创建 Typescript 类型保护

Question

我有三个打字稿类型守卫：

  const isTeaserOne = (teaser: Teaser): teaser is TeaserOneType =>
    typeof teaser === 'object' && teaser.type.includes('One');
  const isTeaserTwo = (teaser: Teaser): teaser is TeaserTwoType =>
    typeof teaser === 'object' && teaser.type.includes('Two');
  const isSpecialTeaser = (teaser: Teaser): teaser is SpecialTeaserType =>
    typeof teaser === 'function';

SpecialTeaserType 类型：

export type SpecialTeaser = ReactElement;

这种类型返回一个 jsx 组件：

copyArray[5] = <MyComponent />;

我如何为这个ReactElement创建类型保护？

Answer 1

试试这个模式：

interface Props {
  variant: “TypeOne” | “TypeTwo”
}

const MyComponent = (props: Props): JSX.Element => { 
<>
  props.variant === “TypeOne” && return (/*JSX*/)
  props.variant === “TypeTwo” && return (/*JSX*/)
</>
}