TypeScript中如何让GenericField泛型参数从value自动推断？

需求完全可以实现，无需手动指定每个GenericField的泛型参数，核心思路是借助泛型工具函数触发TypeScript的自动类型推断。

单实例声明 #

先定义一个通用的工具函数：

type GenericField<T> = {
  value: T;
  onChange(value: T): void;
}

function defineGenericField<T>(field: GenericField<T>) {
  return field;
}

使用时直接调用该函数即可，value的类型会被自动捕获，onChange的参数类型也会同步推断：

const field = defineGenericField({
  value: new Date(),
  onChange: (value) => {
    // value 自动推断为Date类型，可直接调用Date的相关方法
    console.log(value.getFullYear());
  }
});

数组批量声明 #

如果需要批量定义多个GenericField组成的数组，可以再写一个批量工具函数：

function defineGenericFields<T extends any[]>(fields: [...{ [K in keyof T]: GenericField<T[K]> }]) {
  return fields;
}

使用时无需添加任何额外类型注解，数组中每一项的类型都会自动推断，同时全程保障类型安全：

const fields = defineGenericFields([
  {
    value: new Date(),
    onChange: (value) => {
      // value 自动推断为Date类型
    }
  },
  {
    value: '字符串示例',
    onChange: (value) => {
      // value 自动推断为string类型
    }
  },
  {
    value: 100,
    onChange: (value) => {
      // value 自动推断为number类型
    }
  }
]);

// 类型安全验证：如果不符合类型规则会直接触发TS报错
// 例：fields[0].onChange('123') 会报错，因为要求传入Date类型

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