reactjs - Jak vytvořit TypeScript type guard pro typ ReactElement

Mám tři typové ochrany v TypeScriptu:

  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';

Typ SpecialTeaserType:

export type SpecialTeaser = ReactElement;

Tento typ vrací JSX komponentu:

copyArray[5] = <MyComponent />;

Jak vytvořím typovou hlídku pro tento ReactElement?

Odpověď č. 1

Zkuste tento vzor:

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

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