Установите типы на useState React Hook с TypeScript - PullRequest
Новая
       10

Установите типы на useState React Hook с TypeScript

0 голосов
/ 06 декабря 2018

Я перевожу проект React с TypeScript, чтобы использовать функции перехватчиков (React v16.7.0-alpha), но я не могу понять, как установить типизацию деструктурированных элементов.

Вот пример:

interface IUser {
  name: string;
}
...
const [user, setUser] = useState({name: 'Jon'});

Я хочу, чтобы переменная user имела тип IUser.Мое единственное успешное испытание - это выполнить его в два этапа: набрав, затем инициализировав: 

let user: IUser;
let setUser: any;
[user, setUser] = useState({name: 'Jon'});

Но я уверен, что есть лучший способ.Кроме того, setUser следует инициализировать как функцию, которая принимает IUser в качестве ввода и ничего не возвращает.

Также стоит отметить, что использование const [user, setUser] = useState({name: 'Jon'}); без какой-либо инициализации работает нормально, но я бы хотелВоспользуйтесь TypeScript для принудительной проверки типов в init, особенно если это зависит от некоторых реквизитов.

Спасибо за вашу помощь.

Ответы [ 2 ]

0 голосов
/ 14 июля 2019

Первый useState принимает универсальный, который будет вашим IUser.Если затем вы хотите передать возврат второго деструктурированного элемента на useState, вам необходимо импортировать Dispatch.Рассмотрим расширенную версию вашего примера с обработчиком кликов: 

import React, { useState, Dispatch } from 'react';

interface IUser {
  name: string;
}

export const yourComponent = (setUser: Dispatch<IUser>) => {

    const [user, setUser] = useState<IUser>({name: 'Jon'});

    const clickHander = (stateSetter: Dispatch<IUser>) => {
        stateSetter({name : 'Jane'});
    }

    return (
         <div>
            <button onClick={() => { clickHander(setUser) }}>Change Name</button>
        </div>
    ) 
}

См. ответ .

0 голосов
/ 06 декабря 2018

Используйте это 

const [user, setUser] = useState<IUser>({name: 'Jon'});

См. Соответствующий тип здесь: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/8a1b68be3a64e5d2aa1070f68cc935d668a976ad/types/react/index.d.ts#L844

...