Question

我正在迁移带有TypeScript的React项目以使用挂钩功能（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

使用此

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

在此处查看相应的类型：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L799

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。

Answer 3

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

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

关于我的界面前缀：https://basarat.gitbooks.io/typescript/content/docs/styleguide/styleguide.html#interface

Answer 4

https://fettblog.eu/typescript-react/hooks/

// import useState next to FunctionComponent
    import React, { FunctionComponent, useState } from 'react';
    
    // our components props accept a number for the initial value
    const Counter:FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
      // since we pass a number here, clicks is going to be a number.
      // setClicks is a function that accepts either a number or a function returning
      // a number
      const [clicks, setClicks] = useState(initial);
      return <>
        <p>Clicks: {clicks}</p>
        <button onClick={() => setClicks(clicks+1)}>+</button>
        <button onClick={() => setClicks(clicks-1)}>-</button>
      </>
    }

使用TypeScript在useState React Hook上设置类型

4 个答案: