Блог

Возьмите простой компонент react

 interface MyProps {
  color: string
  name?: string
  height?: number

  isBoy?: boolean

  // only add the following if isBoy is true
  actionHero: string
  nickname: string
}

function MyComponent(props: MyProps){
   ...
}
 

Как вы можете видеть, цель состоит в том, что actionHero и nickName требуется, если isBoy установлено значение true. В противном случае они не используются.

Я предполагаю, что это делается с помощью перегрузки функций в typescript, но как вы это делаете в react?

В этом случае вам не нужно перегружать свой компонент. Рассмотрим этот пример:

 import React from 'react'

type Boy = {
  color: string
  name?: string
  height?: number
  isBoy: false
}

type ExtendedBoy = Omit<Boy, 'isBoy'> amp; {
  actionHero: string
  nickname: string
  isBoy: true;
}

type Props = Boy | ExtendedBoy;

function MyComponent(props: Props) {
  if (props.isBoy) {
    props.nickname // stirng
  } else {
    props.isBoy // false
  }
  return <div></div>

}

const withBoy = <MyComponent isBoy color="red" actionHero={'batman'} nickname={'qwert'} /> // ok
const withoutBoy = <MyComponent isBoy={false} color="red" /> // ok
 

Игровая площадка

Я использовал дискриминационные союзы вместо перегрузки функций.

НО никто не сможет остановить вас, если вы все еще хотите перегрузить свой компонент:

 import React, { FC } from 'react'

type Boy = {
  color: string
  name?: string
  height?: number
  isBoy: false
}

type ExtendedBoy = Omit<Boy, 'isBoy'> amp; {
  actionHero: string
  nickname: string
  isBoy: true;
}

const MyComponent: FC<Boy> amp; FC<ExtendedBoy> = (props) => {
  if (props.isBoy) {
    props.nickname // stirng
  } else {
    props.isBoy // false
  }
  return <div></div>

}

const withBoy = <MyComponent isBoy color="red" actionHero={'batman'} nickname={'qwert'} /> // ok
const withoutBoy = <MyComponent isBoy={false} color="red" /> // ok
 

Игровая площадка

Пожалуйста, имейте в виду, что пересечение функций приводит к перегрузке функций FC<Boy> amp; FC<ExtendedBoy>

Если вас интересует проверка машинописного текста в компонентах react, смотрите мою статью и мой блог здесь и здесь

Это возможно, поскольку типы не имеют условной логики и не могут зависеть друг от друга только с двумя сопоставленными типами. Один для необязательных свойств, а другой для требуемых.

 interface MyProps {
    color: string
    name?: string
    height?: number
    isBoy?: false | null
}

interface MyProperRequired extends MyProps {
    isBoy: true
    // only add the following if isBoy is true
    actionHero: string
    nickname: string
}

function MyComponent(props: MyProps | MyProperRequired) {

}


MyComponent({ color: "red", height: 1, name: "hi", isBoy: true })