TypeScript如何从interface推导字段+对应payload的联合字面量类型

实现方案 #

你可以通过 TypeScript 映射类型封装通用推导工具，无需手动维护联合类型的字段，后续IFilterSettings新增字段时会自动同步到结果类型中。

步骤1：封装通用转换工具类型

type FieldChange<T> = {
  [Key in keyof T]: {
    field: Key
    payload: T[Key]
  }
}[keyof T]

步骤2：代入你的业务类型生成目标类型

// 你的原筛选器设置类型（假设 Members 类型已提前声明）
interface IFilterSettings {
  title: string
  teamMembers: Members
}

// 直接生成需要的 FilterChange 联合类型
type FilterChange = FieldChange<IFilterSettings>

类型校验效果示例

生成的FilterChange和你手动写的效果完全一致，会自动校验字段和对应payload的类型匹配：

// 合法写法
const titleChange: FilterChange = {
  field: 'title',
  payload: '搜索关键词'
}
const memberChange: FilterChange = {
  field: 'teamMembers',
  payload: ['张三', '李四'] // 符合Members类型即可
}

// 错误写法会触发TS报错，比如payload类型不匹配、field不存在等
const wrongChange: FilterChange = {
  field: 'title',
  payload: 123 // 类型错误，title的payload应为string
}

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