如何为动态创建的TypeScript函数声明泛型？并在useFoo中使用泛型T

问题1：如何为动态创建的函数声明泛型类型？ #

原代码中generateFunction的泛型T被定义在外层函数，导致调用generateFunction时就需要指定T，这不符合动态创建函数的需求——我们希望返回的函数（比如useFoo）自己能独立接收泛型参数。

解决方法是将泛型T从外层函数移到返回的内层函数上，让返回的函数拥有自主的泛型能力：

type FooType = {
  username: string;
}

type BarType = {
  age: number;
}

interface DataStore {
  foo: FooType;
  bar: BarType;
}

const getDataStore = () => ({
  foo: { username: 'Tera' },
  bar: { age: 24 },
})

// 仅在外层声明切片类型的泛型S，T交给返回的函数处理
const generateFunction = <S extends keyof DataStore>(slice: S) => {
  type DataSlice = DataStore[S];
  // 内层函数声明泛型T，对应selector的返回值类型
  return <T>(selector: (store: DataSlice) => T) => selector(getDataStore()?.[slice]);
}

问题2：如何在useFoo中使用泛型T，并正确调用generateFunction？ #

经过上面的调整，调用generateFunction('foo')得到的useFoo本身就是一个带泛型的函数，直接按你期望的方式使用即可：

// 生成针对foo切片的useFoo函数
const useFoo = generateFunction('foo');

// 按需求指定泛型T并传入selector
type UserName = string;
const userName = useFoo<UserName>((foo: FooType) => foo.username);

甚至TypeScript可以自动推导泛型T，无需显式指定：

// TS会根据selector的返回值自动推导T为string，无需显式<UserName>
const userName = useFoo((foo: FooType) => foo.username);

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