在 useState 中具有泛型类型的 Typescript 函数,允许可为空
Posted
技术标签:
【中文标题】在 useState 中具有泛型类型的 Typescript 函数,允许可为空【英文标题】:Typescript function with generic type in useState, allow nullable 【发布时间】:2022-01-16 04:31:35 【问题描述】:我在 React 中有这样的钩子函数:
export function useFetch<T = unknown|null>(url: string) : [T, boolean]
const accessToken = useAccessToken();
const [data, setData] = useState<T>(null); // TS ERROR
const [isLoading, setIsLoading] = useState<boolean>(true);
useEffect(() =>
if (accessToken)
fetch(`/api/v1$url`,
headers:
Authorization: `Bearer $accessToken`,
,
)
.then((res) => res.json())
.then(data =>
setData(data);
setIsLoading(false);
);
, [accessToken, url]);
return [data, isLoading];
但我收到此错误:
Argument of type 'null' is not assignable to parameter of type 'T | (() => T)'.ts(2345)
如何将 T 定义为可为空的?
【问题讨论】:
【参考方案1】:T = unknown | null
是default for generic type parameter,但这并不意味着提供的T
将允许null
。相反,您可以指定除了T
之外,状态还允许null
:
export function useFetch<T>(url: string): [T | null, boolean]
const accessToken = useAccessToken();
const [data, setData] = useState<T | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(true);
// ...
return [data, isLoading];
Playground
【讨论】:
以上是关于在 useState 中具有泛型类型的 Typescript 函数,允许可为空的主要内容,如果未能解决你的问题,请参考以下文章
Python 3 类型,具有任意数量的包含类型的自定义可变参数泛型,如何?
如何为 useHitory() 覆盖非泛型类型,例如 @types/History?