代码之家 › 专栏 › 技术社区 › tdawg

如何在useFetch钩子中指定响应类型

react-typescript typescript

-2

tdawg · 技术社区 · 2 年前

我有一个 useFetch

function useFetchDemo<ResponseType>(url: string): {
  data: ResponseType;
} {
  const [data, setData] = useState<ResponseType | null>(null);

  useEffect(() => {
    axios.get(url).then((res) => setData(res["data"]));
  }, []);

  return { data };
}

我打算像这样使用它 useFetch<UserInterface>("/users/123") 或 useFetch<PostInterface>("/posts/123") ,它允许我根据查询的端点指定响应数据类型。

然而,我得到了一个错误:

Type 'ResponseType | null' is not assignable to type 'ResponseType'.
  'ResponseType' could be instantiated with an arbitrary type which could be unrelated to 'ResponseType | null'.ts(2322)

看起来我应该传递一个不同的初始值给 useState

1 回复 | 直到 2 年前

1

2

HenriDev 2 年前

function useFetchDemo<ResponseType>(url: string): {
  data: ResponseType | null;
} {
  const [data, setData] = useState<ResponseType | null>(null);

  useEffect(() => {
    axios.get<ResponseType>(url).then((res) => setData(res["data"]));
  }, []);

  return { data };
}

将响应类型传递给axios get请求。axios/index.d.ts中定义了通用的get方法

get<T = never, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig<T>): Promise<R>;

接下来,还要将null选项添加到数据中