Передача useState в качестве реквизита в машинописи - PullRequest
Новая
       65

Передача useState в качестве реквизита в машинописи

1 голос
/ 07 мая 2019

Скажем, у меня есть родительский компонент с двумя дочерними компонентами: 

const Parent = () => {
   const [myVar, setmyVar] = useState(false)

   return (
     <>
       <MyChildComponent1 myVar={myVar} setMyVar={setMyVar} \> 
       <MyChildComponent2 myVar={myVar} \>
     </>
   )
}

Теперь, как мне правильно установить тип в MyChildComponent2?

Это то, что я имеюпока что придумайте: 

const MyChildComponent1 = (
  {myVar, setMyVar}: 
  {myVar: boolean, setMyVar: (value: boolean) => void}) = (...)

Является ли тип для setMyvar правильным?Или это должно быть что-то еще?

1 Ответ

3 голосов
/ 07 мая 2019

Тип, который будет соответствовать функции, возвращаемой при вызове useState, будет: 

setMyVar: (value: boolean | ((prevVar: boolean) => boolean)) => void;

Если мы посмотрим на файл определения типа из DefinitelyTyped [1], то увидим, что вторым типом в возвращаемом типе является диспетчеризация: 

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

Таким образом, предоставленный универсальный тип передается в SetStateAction<S>, который определяется как: 

type SetStateAction<S> = S | ((prevState: S) => S);

Итак, интерфейс вашего компонента будет следующим: 

interface IProps {
  myVar: boolean;
  setMyVar?: (value: boolean | (prevVar: boolean) => boolean) => void;
}

Ссылка: [1] https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L845

...