TypeScript 中如何基于同级属性的泛型自动推断对应属性的类型

最优实现方案：使用泛型辅助函数 #

利用 TypeScript 对函数入参的泛型自动推导能力，不需要手动为每个 Filter 对象声明泛型，也不需要枚举所有可能的 V 类型。

完整实现代码 #

// 补全原示例中缺失的 Props 类型定义
type Props<V> = {
  value: V
}

type Person = {
  id: number;
  name: string;
}

type Select<Value=unknown> = (props:Props<Value>) => any;

const PersonSelect:Select<Person> = (props) => null
const TextSelect:Select<string> = (props) => null

type Filter<V = unknown > = {
  component: Select<V>,
  transformer: (value: V) => string
};

// 核心：泛型批量构造函数
const createFilters = <T extends unknown[]>(filters: { [K in keyof T]: Filter<T[K]> }) => filters;

// 直接声明数组即可，transformer 入参自动推导类型
const filters = createFilters([
  {
    component: PersonSelect,
    // selected 自动推导为 Person 类型
    transformer: (selected) => selected.name
  },
  {
    component: TextSelect,
    // selected 自动推导为 string 类型
    transformer: (selected) => selected
  }
])

原理解释 #

调用泛型函数时，TypeScript 会根据传入的参数自动推断泛型的实际类型：

1. 先从每个数组元素的 component 属性中提取 Select 的泛型参数 V
2. 将提取到的 V 自动应用到同对象的 transformer 函数的入参类型上
3. 不需要任何手动的类型标注，支持任意 V 类型，无需提前枚举联合类型

如果希望单独构造单个 Filter 对象，也可以使用单对象版本的辅助构造函数：

const createFilter = <V,>(filter: Filter<V>) => filter;

const personFilter = createFilter({
  component: PersonSelect,
  transformer: (selected) => selected.name
})

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