如何为接收返回AxiosResponse函数的React泛型组件定义TS类型

你的类型报错是因为你给AxiosResponse的泛型参数指定为了never，该类型表示永远不存在的值，自然无法读取data属性。同时你的组件需要支持不同类型的请求返回数据，需要通过泛型来关联request返回值、内部状态、render入参的类型对应关系。

正确实现代码 #

import { AxiosResponse } from 'axios';
import { ScrollBox } from 'components/atoms';
import { IProps as ScrollBoxProps } from 'components/atoms/ScrollBox/ScrollBox';
import React, { ReactNode } from 'react';

// 定义泛型接口，T代表列表项的类型
interface IProps<T> extends ScrollBoxProps {
  // 约定request返回的axios响应第一层data是包含列表的结构，列表项类型为T
  request: (args?: unknown) => Promise<AxiosResponse<{ data: T[] }>>;
  // render接收的参数和列表项类型一致
  render: (item: T) => ReactNode;
}

// 声明为泛型组件
export const FetchBox = <T,>({
  rounded,
  title,
  height,
  request,
  render,
}: IProps<T>) => {
  // 定义state类型为T数组
  const [list, setList] = React.useState<T[] | undefined>(undefined);

  React.useEffect(() => {
    const makeRequest = async () => {
      const response = await request();
      setList(response.data.data);
    };
    makeRequest();
  }, []);

  return (
    <ScrollBox rounded={rounded} title={title} height={height}>
      {list?.map((element) => render(element))}
    </ScrollBox>
  );
};

export default FetchBox;

使用示例 #

先定义业务数据类型：

interface IUser {
  id: number;
  name: string;
}

使用组件时传入对应泛型即可：

<FetchBox<IUser>
  request={fetchUserList}
  render={(user) => <div>{user.name}</div>}
  title="用户列表"
  height={400}
/>

如果你的接口返回结构不是固定的response.data.data格式，可以调整泛型定义适配不同的接口结构。

内容的提问来源于stack exchange，提问作者SektorDV