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

Question

我在 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 定义为可为空？

Answer 1

T = unknown | null是一个default for generic type parameter，并不意味着提供T就可以null。相反，您可以指定 null 除了 T:

之外还允许用于状态

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 函数，允许可为空

Typescript function with generic type in useState, allow nullable

typescript

reactjs

typescript-generics

react-hooks

react-typescript