如何以泛型方式实现TypeScript对象属性的类型同步约束

TypeScript 原生支持这类同对象内属性的匹配校验能力，核心思路是抽离两个属性共享的类型维度作为泛型参数，通过泛型约束强制两者满足匹配规则，可以实现完全通用的逻辑，不需要针对特定场景硬编码判断。

实现步骤 #

1. 改造基础类型，保留精确字面量类型 #

你最初的代码里Widget和ConfigItem的type字段都标注为宽泛的string类型，TypeScript 无法识别每个组件、每个配置项的具体类型值，自然没法做关联校验。首先要改造Widget为泛型类型，同时定义组件实例时保留精确的字面量类型：

// 泛型Widget，T表示组件存储的值类型，对应type字段的字面量类型
type Widget<T extends string = string> = {
  id: string
  type: T
}

// 注意：不要直接给实例标注: Widget，会把类型拓宽为string，丢失字面量信息
// TS 4.9+ 可以用satisfies，既校验结构符合Widget，又保留字面量类型
const datepicker = {
  id: "datepicker",
  type: "string" // 自动推导为字面量类型 "string"
} satisfies Widget

const numberpicker = {
  id: "numberpicker",
  type: "number" // 自动推导为字面量类型 "number"
} satisfies Widget

// 低于4.9版本可以用as const实现同样效果：
// const datepicker = { id: "datepicker", type: "string" } as const

2. 定义带关联约束的泛型配置项类型 #

把两个需要匹配的属性共同绑定到同一个泛型参数上，强制两者类型一致：

// 通用ConfigItem，泛型T是当前配置项的值类型
// 核心约束：widget.type的类型必须和当前配置项的type类型完全匹配
type ConfigItem<T extends string = string> = {
  name: string
  type: T
  widget: Widget<T>
}

3. 定义通用配置构造函数，自动推导泛型 #

如果直接把Config定义为Array<ConfigItem>，TypeScript 会把泛型参数拓宽为默认的string，约束会失效。可以写一个无额外逻辑的辅助函数，让TypeScript 自动从传入的配置项中推导每个条目的泛型参数，自动完成校验：

// 通用配置构造函数，接收任意符合ConfigItem约束的配置数组，自动做类型匹配检查
function defineConfig<T extends string>(config: ReadonlyArray<ConfigItem<T>>) {
  return config
}

使用效果 #

编写配置时TypeScript会自动做类型匹配校验，不符合规则的写法会直接抛类型错误：

const config = defineConfig([{
  name: "birthdate",
  type: "string",
  widget: datepicker, // ✅ 校验通过，type和widget.type均为"string"
}, {
  name: "age",
  type: "number", 
  widget: numberpicker // ✅ 校验通过，type和widget.type均为"number"
}, {
  name: "numberPets",
  type: "number", 
  widget: datepicker // ❌ 类型错误：datepicker的type为"string"，与当前项type"number"不匹配
}])

通用规则扩展 #

这套逻辑不局限于当前的Widget场景，如果你需要的匹配规则不是简单的类型相等，比如要支持子类型兼容、多分支匹配，只需要调整ConfigItem里的泛型约束即可。比如要实现「组件支持的类型是配置项类型的子类型即可通过校验」的宽松规则，只需要把类型定义改成：

type ConfigItem<T extends string = string> = {
  name: string
  type: T
  widget: Widget<infer W> extends Widget<any> 
    ? W extends T ? Widget<W> : never 
    : never
}

只要是同一对象内两个属性需要满足关联匹配规则的场景，都可以通过「抽离共享类型维度为泛型+泛型约束」的方式实现，不需要复杂的类型体操。

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