在 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 | (() =&gt; 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?

具有 React useState 设置功能的打字稿类型的 Ramda 镜头组合

如何使用泛型正确设置 react useState

Ts高级类型(Utility Types)

如何在流中定义具有指定类型的所有可选字段的泛型类型