如何键入反应 useState 挂钩？

Question

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

第一个：

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

我用它来获取 localStorage 并用它来保存我的数据 APIs

第二个是：

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

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

有什么关于如何输入的想法吗？

Answer 1

对于第一个示例，如果您省略 <any>，则打字稿会将 localRead 的类型推断为状态的类型：

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

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

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

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

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

如何键入反应 useState 挂钩？

How do I type the react useState hook?

types

interface

typescript

reactjs