React TypeScript移除未使用<T>泛型后丢失自动补全问题

泛型函数与普通函数的推断逻辑差异 #

这本质是TypeScript类型推断上下文的变化导致的：

• 当onConfirm带有<T>（哪怕这个泛型没被使用）时，它属于泛型函数类型。此时TypeScript会强制把组件的泛型参数U和函数参数的keyof U约束强关联起来。在使用组件时，TS会从你传入的propertyName、value等属性反向推断出U的具体类型，完整保留U的所有键名信息，自动补全功能自然正常工作。
• 一旦移除<T>，onConfirm就变成了普通函数类型。这时TS的推断逻辑会“退化”：它不再坚持绑定U到具体的传入对象类型，而是会把U推断成一个宽泛的索引类型（比如{ [key: string]: string }）。这种情况下，keyof U等价于string类型，没有具体的键名枚举可选，自动补全自然失效。

直观对比示例 #

假设你有一个具体类型：

type User = { username: string; email: string };

• 带<T>时：TS能精准推断U = User，propertyName会自动补全"username"和"email"；
• 不带<T>时：TS会把U推断成{ [key: string]: string }，propertyName只能输入任意字符串，没有补全提示。

替代方案（移除无用的同时保留补全） #

如果想删掉那个没用的<T>，可以通过两种方式恢复自动补全：

1. 使用组件时显式指定泛型参数：

<TextInput<User> propertyName="username" value="john" ... />

2. 调整接口约束，强化U的关联性（让TS更明确propertyName与U的绑定关系，避免推断退化）：

interface TextInputProps<U> {
  label: string;
  propertyName: Extract<keyof U, string>;
  value: Extract<U[keyof U], string>;
  onConfirm: (
    propertyName: Extract<keyof U, string>,
    value: string | null,
    label?: string
  ) => void;
}

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