在 useState 中具有泛型类型的 Typescript 函数，允许可为空

Posted 2023-03-13

【中文标题】在 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