如何创建可自动推断值类型的Task字段更新Reducer泛型类型

需求回顾 #

需要实现一个适用于Reducer的泛型类型，当指定Task对象的某个字段时，payload的value必须与该字段类型兼容，且无需手动指定泛型参数，TypeScript能自动推断value的类型。

解决方案1：使用联合类型自动匹配字段与值类型 #

直接生成包含所有Task字段对应payload的联合类型，TypeScript会自动校验对象是否符合其中某一种类型：

type Task = {
    id: number
    title: string
    description?: string
}

// 生成每个字段对应的payload类型，再合并为联合类型
type UpdateTaskPayload = {
  [K in keyof Task]: {
    field: K
    value: Task[K]
  }
}[keyof Task]

测试示例

const task: Task = {
    id: 42,
    title: 'Do the dishes',
}

// 错误示例：value类型与title字段不匹配，TypeScript会直接报错
const invalidPayload: UpdateTaskPayload = {
    field: 'title',
    value: 42
}

// 正确示例：类型匹配，自动校验通过
const validTitlePayload: UpdateTaskPayload = {
    field: 'title',
    value: 'Buy groceries'
}

// 支持可选字段的类型校验
const validDescPayload: UpdateTaskPayload = {
    field: 'description',
    value: 'Finish before dinner'
}

解决方案2：用泛型函数实现更灵活的自动推断 #

如果是在创建Reducer动作（action）时使用，泛型函数能更直观地自动推断字段和值的类型：

type Task = {
    id: number
    title: string
    description?: string
}

// 动作创建函数，自动推断字段K对应的value类型
function createUpdateTaskAction<K extends keyof Task>(field: K, value: Task[K]) {
  return {
    type: 'UPDATE_TASK',
    payload: { field, value } as const
  }
}

// 错误调用：value类型不匹配，直接报错
const invalidAction = createUpdateTaskAction('title', 42)

// 正确调用：自动推断类型，无需手动指定泛型
const validAction = createUpdateTaskAction('id', 100)
const validDescAction = createUpdateTaskAction('description', undefined)

原方案的问题说明 #

你之前的UpdateTaskPayload<TField>需要手动指定泛型参数，是因为TypeScript无法从对象字面量直接推断泛型类型参数。而上述两种方案通过联合类型或泛型函数，让TypeScript自动完成类型匹配和推断，无需手动传入泛型参数。

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