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

Я переношу проект React с проектом TypeScript, чтобы использовать функции hooks (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, особенно если это зависит от некоторых реквизитов.

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

Ответ 1

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

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

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

Ответ 2

Сначала 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>
    ) 
}

Смотрите этот ответ.