Typescript如何根据泛型函数入参自动推导对应返回类型

可以通过类型映射+入参关联泛型的方式实现需求，无需手动声明泛型，TS会自动根据入参推导返回类型，还能强制入参和返回类型的匹配关系，避免出错。

第一步：定义类型映射表 #

先把字符串字面量和对应的返回类型做关联，同时可以直接从映射表提取入参的联合类型，后续新增类型只需要维护这一个映射即可：

// 先定义你原本的各业务类型
type Foo = { id: number; name: string }
type Bar = { id: string; price: number }
type Baz = { key: string; expired: boolean }

// 定义字符串字面量到对应类型的映射
type TypeMap = {
  foos: Foo
  bars: Bar
  bazs: Baz
}

// 入参的联合类型直接从映射表的key提取，无需手动维护
type MyType = keyof TypeMap

第二步：改写自定义hook的类型定义 #

把泛型和入参name绑定，返回值直接从映射表取对应类型：

const useMyHook = <K extends MyType>(name: K): TypeMap[K] => {
  // 运行时逻辑可以自己维护对应的取值逻辑，类型会自动匹配
  // 示例运行时实现：
  const runtimeDataMap = {
    foos: () => ({ id: 1, name: '测试foo' } as Foo),
    bars: () => ({ id: 'bar1', price: 99 } as Bar),
    bazs: () => ({ key: 'baz1', expired: false } as Baz),
  }
  return runtimeDataMap[name]()
}

第三步：使用效果 #

调用时只需要传入name参数，TS会自动推导返回值类型，且会强制校验入参和返回类型的对应关系，不会出现二者不匹配的问题：

// 自动推导foo的类型为Foo，无需手动传入泛型
const foo = useMyHook('foos')
// 自动推导bar的类型为Bar
const bar = useMyHook('bars')

// 如果你手动传错泛型会直接报错，避免类型不匹配的问题
// 以下代码TS会直接提示错误：类型"bars"不满足类型"foos"的约束
// const wrong = useMyHook<'foos'>('bars')

如果你的场景需要更复杂的入参和返回值对应逻辑，也可以用函数重载实现，但类型映射的方案在类型数量较多时维护成本更低，只需要修改TypeMap即可完成类型的新增/修改，不需要调整hook的类型定义。

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