React+TypeScript 跨多层类型推导是否符合TS生态最佳实践？

你的思路完全合理，是React+TS分层架构下非常推荐的实践方案。

针对你的两个疑问的明确解答 #

• 问题1：这种跨多层的类型推导是TS生态普遍认可的写法
  这种依赖下层返回类型向上自动穿透的设计，完全符合TS的类型推导理念，同时完美契合你要求的层级隔离原则：上层不需要感知下层的内部类型定义，也不会产生跨层的类型依赖，避免了类型定义冗余和多层维护的问题。
• 问题2：TS完全可以正确推导到最上层的组件层
  只要你不在中间层手动声明宽泛的返回类型（比如any/unknown），TS的类型系统会自动沿着调用链路把最底层API定义的返回类型逐层透传到组件层，不需要额外的手动操作。

具体实现示例 #

1. API层（仅内部维护类型，不对外导出） #

// apis/foobar.ts
import axios from 'axios'

// 列表接口内部类型，不对外导出
interface FoobarListItem {
  id: string
  name: string
}
// 详情接口内部类型，不对外导出
interface FoobarDetailItem extends FoobarListItem {
  email: string
  address: string
}

export const FoobarApi = {
  // 给axios.get指定泛型，明确该接口的返回类型
  list: () => axios.get<FoobarListItem[]>("/api/v1/foobars").then(res => res.data),
  getDetail: (id: string) => axios.get<FoobarDetailItem>(`/api/v1/foobar/${id}`).then(res => res.data)
}

2. Hook层（不需要手动声明类型，自动推导） #

// hooks/useQueryFetchFoobars.ts
import { useQuery } from '@tanstack/react-query'
import { FoobarApi } from 'apis/foobar'

// 不要手动指定返回类型，让TS自动根据FoobarApi.list的返回值推导
export const useQueryFetchFoobars = () => {
  return useQuery({
    queryKey: ['foobars'],
    queryFn: FoobarApi.list
  })
}

3. 组件层（无需引入任何类型，直接使用） #

// components/FoobarListComponent.tsx
import { useQueryFetchFoobars } from 'hooks/useQueryFetchFoobars'

const FoobarListComponent = () => {
  // 这里的data会被自动推导为 FoobarListItem[] | undefined，不需要手动传泛型或者引入类型
  const { data } = useQueryFetchFoobars()

  return (
    <ul>
      {data?.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  )
}

和每层显式声明类型的对比 #

行业通用的实践原则是：

• 如果中间层没有对返回数据做字段裁剪、结构转换等操作，返回值和下层完全一致，优先用自动类型推导，避免冗余的类型声明，降低多侧类型不一致的维护成本
• 如果中间层需要对数据做二次处理，才需要在对应层显式声明转换后的返回类型

你的场景中没有中间数据转换，自动推导是最优方案，同时完美适配你后端同资源不同接口返回结构不一致的需求，每个API单独定义内部类型即可，互不干扰。

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