Как передать тип переменных / сеттеров useState из дочернего компонента в TypeScript

Question

У меня есть этот родительский компонент, который использует useState:

export type Info = {
  color: 'red' | 'yellow' | 'green' | 'blue'
  isActive: boolean
}

const ParentComponent: React.FC =(props: any) => {
  const [tab, setTab] = useState(0)
  const [info, setInfo] = useState({
    color: 'red',
    isActive: false,
  })

  return (
    <ChildComponent
      tab={tab}
      setTab={setTab}
      info={info}
      setInfo={setInfo}
    />
  )
}

Он рендерит этот дочерний компонент:

interface Props {
  tab: number
  setTab: (p: number) => void
  info: Info
  setInfo: (p: Info | ((p: Info) => any)) => void
}

const ChildComponent: React.FC<Props> = ({
  tab,
  setTab,
  info,
  setInfo,
}) => (
  /* some JSX */
)

Сейчас мне нужно набрать все реквизиты вручную для ChildComponent даже если типы уже определены в ParentComponent. Есть ли способ передать наборы tab, setTab, info и setInfo из ParentComponent в ChildComponent?

Answer 1

ChildComponent не сможет напрямую выводить наборы из ParentComponent. Однако, что вы можете сделать для достижения аналогичного результата, так это определить общий интерфейс для ParentComponent и ChildComponent.

Сначала вы определите общий интерфейс / тип для вашего состояния ParentComponent.

export interface CommonState {
  tab: number;
  info: Info;
}

Затем мы используем интерфейс при объявлении хуков useState в ParentComponent.

const [tab, setTab] = useState<CommonState['tab']>(0)
const [info, setInfo] = useState<CommonState['info']>({
  color: 'red',
  isActive: false,
});

Затем вместо ChildComponent вместо объявления нового типа для ребенка это может быть расширение интерфейса CommonState, так что наборы будут общими.

interface Props extends CommonState {
  setTab: (p: number) => void
  setInfo: (p: Info | ((p: Info) => any)) => void
}