如何解决TypeScript泛型约束T extends DataResponse<T>不满足报错

你定义的DataResponse<Data>接口的泛型参数Data是用来指定data数组的元素类型，而你给Hook写的泛型约束T extends DataResponse<T>属于错误的循环引用：相当于要求传入的类型T的data属性必须是T类型的数组，和你实际的接口响应结构完全冲突。
你实际的ClassesResponse的data字段是业务对象数组，不是ClassesResponse自身的数组，自然触发类型不兼容报错。

调整Hook的泛型约束即可，不需要修改原有调用逻辑：

// 定义通用的接口响应基类，兼容你带total的结构
interface BaseResponse<DataItem> {
  data: DataItem[];
  total: number;
}

// 泛型T代表完整的接口响应类型，约束它满足BaseResponse的结构即可
export const useRequestInfiniteHooks = <T extends BaseResponse<any>>() => {
  const url = "/lms/class/all";

  const result = apiRequest()
  const mappedData: T['data'] = mappingData()

  return {data: mappedData};
};

// 原有调用代码完全无需修改，类型会自动匹配
type ClassesResponse = {
  data: {
    id: string;
    title: string;
  }[];
  total: number;
};

const MantapComponent = () => {
  // 这里返回的data类型会自动匹配为 {id: string; title: string;}[]
  const { data } = useRequestInfiniteHooks<ClassesResponse>();
};

如果希望泛型语义更清晰，也可以直接将Hook的泛型指定为data数组的元素类型，写法如下：

export const useRequestInfiniteHooks = <T, >() => {
  const url = "/lms/class/all";
  const result = apiRequest()
  const mappedData: T[] = mappingData()
  return {data: mappedData};
};

const MantapComponent = () => {
  // 直接传入业务对象类型，返回的data自动为该类型的数组
  const { data } = useRequestInfiniteHooks<{id:string; title:string}>();
};

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