如何键入 react useState 钩子？答案

【问题标题】：How do I type the react useState hook?如何键入 react useState 钩子？
【发布时间】：2021-05-25 01:20:08
【问题描述】：

我在我的 React 组件中输入 2 个元素时遇到问题。

第一个：

 const [data, setData] = useState<any>(localRead);

我使用它来获取 localStorage 并使用它来保存来自 API 的数据

第二个是：

 const [response, setResponse] = useState<any>([]);

这个工作就像从 API 获取信息并使用接口 Vimeo + YouTube + Video，但是当我使用它时，它不想工作..

关于如何输入的任何想法？

【问题讨论】：

标签： reactjs typescript types interface

【解决方案1】：

对于第一个示例，如果您省略 <any>，那么 typescript 将推断 localRead 的类型作为状态的类型：

const [data, setData] = useState(localRead);
// data is now the same type as localRead

但第二个例子更难。您必须向useState 提供类型提示，因为它的值是稍后设置的。要确定使用什么类型，您必须使用提供此数据的函数的返回类型。在大多数打字稿环境中，您可以将光标悬停在查看它返回的类型的函数上。这就是您要提供给useState 的类型。

例如，假设您使用的库是这样实现的：

// External library that provides data.
export type MyData = { foo: number }[]

export function getMyData(): MyData {
    return [
        { foo: 123 },
        { foo: 456 },
    ]
}

然后你可以编写一个看起来像这样的组件：

function Component() {
    const [myState, setMyState] = useState([])

    useEffect(() => {
        const myData = getMyData()
        setMyState(myData)
    }, [])

    return <></>
}

此时myState的类型是错误的。但是，如果您将鼠标悬停在 getMyData 上，您应该会看到类型信息，如下所示：

function getMyData(): MyData

您现在可以import { MyData } from 'whatever-lib' 并将其用于您的州。结果：

function Component() {
    const [myState, setMyState] = useState<MyData>([])

    useEffect(() => {
        const myData = getMyData()
        setMyState(myData)
    }, [])

    return <></>
}

当然，根据您使用的库，这些类型可能会有所不同，但这描述了当该状态来自其他代码时，您如何从您的状态中发现正确的类型。

Playground with the above example

您也可以直接从数据函数中获取返回类型，例如：

useState<ReturnType<typeof getMyData>>([])

如果您使用的库没有导出函数返回的类型，或者该类型在某些方面非常冗长，这可能会很方便。但是，如果上述过程没有产生令人满意的结果，我只会鼓励使用这种难以阅读的类型。

【讨论】：