使用TypeScript在useState React钩子上设置类型

Question

我正在迁移React with 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上强制执行类型检查，特别是如果它依赖于一些道具的话。

谢谢你的帮助。




Answer 1

您还可以在之前声明初始状态，然后可以随时调用它：

type User = typeof initUser;
const initUser = {name: 'Jon'}
...
const [user, setUser] = useState<User>(initUser);

关于I接口前缀：https://basarat.gitbooks.io/typescript/content/docs/styleguide/styleguide.html#interface

Answer 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>
    ) 
}

看看这个答案。

Answer 3

用这个

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

请参阅相应的类型在明确类型