如果我声明一个类型如下
type UseBoolean = ReturnType<typeof React.useState<boolean>>;
UseBoolean
被推断为
[boolean | undefined, React.Dispatch<React.SetStateAction<boolean | undefined>>]
但是当我查看React.useState
的源代码时,
function React.useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>]
这让我觉得UseBoolean
应该
[boolean, React.Dispatch<React.SetStateAction<boolean>>]
那为什么不是呢
3条答案
按热度按时间sauutmhj1#
但是当我查看
React.useState
的源代码时...在它下面还有第二个重载,它被你的类型拾取(但是我们可以修复它,继续阅读):
它允许用户不为状态成员提供初始值的情况。例如(playground link):
我想不出只获取第一个重载的方法,但我们可以删除具有Map类型的
undefined
:然后:
Playground链接
如果需要,我们可以简化创建
UseXYZ
类型的过程:那么使用它就是:
Playground链接
xqk2d5yq2#
在TypeScript中使用
useState
挂接时,可以指定该挂接所管理的状态的类型。在您的情况下,该类型定义为UseBoolean。但是,由于没有显示任何代码来演示该挂接的用法,因此假定您没有提供初始值。因此,下面的代码:const [bool, setBool] = useState<boolean>();
将导致
boolean | undefined
类型。如果我说的不正确,请提供更多的例子来说明useState钩子的用法。
5tmbdcev3#
UseBoolean不被推断为[boolean,React.Dispatch]的原因<React.SetStateAction>是TypeScript推断泛型函数类型的方式。
当您使用布尔参数调用React.useState时,TypeScript会正确地将返回元组的类型推断为[boolean,React.Dispatch<React.SetStateAction>]。
但是,当您使用ReturnType〈typeof React.useState〉提取useState函数的返回类型时,TypeScript会丢失传递给useState的类型参数boolean的相关信息。因此,为UseBoolean推断的类型是useState的原始返回类型,其中包括类型参数S。
由于类型参数S可以是任何类型,因此TypeScript保守地将其推断为布尔值|undefined,这意味着返回的元组[boolean|未定义,React分派〈React设置状态操作〈布尔值|undefined〉〉]包括布尔值和undefined作为可能的值。