TypeScript泛型问题：基于对象键值类型创建对象时类型推断错误

要解决这个问题，核心是让key的具体值和render参数的类型建立关联，而非让两者独立推断。

问题根源 #

你之前的ClickableItem泛型定义里，key的类型是keyof T，render的参数类型是T[keyof T]——这两个类型完全独立，TypeScript无法识别key的具体值对应的精确值类型，只能把所有可能的值类型合并成联合类型。

修正方案 #

给ClickableItem新增一个泛型参数Key，约束它为keyof T，让key和render参数的类型绑定到同一个Key上：

type Example = {
  a: string;
  b: number;
};

// 修正后的泛型类型，通过Key参数关联key与render的参数类型
type ClickableItem<T, Key extends keyof T = keyof T> = {
  key: Key;
  render: (value: T[Key]) => void;
};

使用方式 #

1. 手动指定泛型参数：明确传入Key的具体值，让TypeScript精准推断render的参数类型：

const itemA: ClickableItem<Example, 'a'> = {
  key: 'a',
  render: (value) => {
    // value被正确推断为string
    console.log(value.toUpperCase());
  }
};

2. 自动推断（TS 4.9+）：用satisfies关键字让TypeScript根据你传入的key自动推断对应的值类型，无需手动声明泛型参数：

const itemB = {
  key: 'b',
  render: (value) => {
    // value被正确推断为number
    console.log(value.toFixed(2));
  }
} satisfies ClickableItem<Example>;

这样就能确保选择某个key时，render的参数类型是该key对应的精确类型，而非所有值类型的联合。

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