TypeScript中如何动态获取对象键字面量类型以实现IDE自动补全

原问题核心 #

你之前定义的GenericInput使用[key: string]索引签名，会丢失具体键的字面量类型，导致IDE无法提供键的自动补全。要保留键的字面量信息，需要通过泛型约束捕获具体的键类型。

具体修改方案 #

1. 抽离通用输入字段类型：将输入项的结构单独定义，避免重复代码
2. 泛型化GenericInput：让它接受泛型参数K（代表具体的键字面量类型），约束K为string类型
3. 泛型化组件：让PageContent组件绑定泛型参数K，确保输入、输出类型都和具体键字面量关联

完整代码示例 #

// 单独定义通用输入字段类型
type InputField = {
  value: string;
  type: HTMLInputTypeAttribute;
  placeholder: string;
  min?: number;
  max?: number;
  required?: boolean;
  error?: string;
};

// 泛型版本的GenericInput，K为具体的键字面量类型
type GenericInput<K extends string> = {
  [Key in K]: InputField;
};

// 泛型化PageContent组件，绑定键类型K
function PageContent<K extends string>(props: {
  children: React.ReactNode;
  inputs: GenericInput<K>;
  getData: (data: GenericInput<K>) => void;
}) {
  const [query, setQuery] = useState<GenericInput<K>>(props.inputs);
  
  // formKeys被推断为K[]类型，保留字面量信息
  const formKeys = Object.keys(query) as K[];
  
  getData(query);
  
  // 组件其他逻辑...
}

使用效果 #

当传入具体的表单配置时，TypeScript会自动推断出K的字面量类型，IDE会提供键的自动补全：

PageContent({
  children: <div>用户表单</div>,
  inputs: {
    username: { value: "", type: "text", placeholder: "请输入用户名" },
    email: { value: "", type: "email", placeholder: "请输入邮箱" }
  },
  getData: (data) => {
    // 这里输入data.后，IDE会自动提示username、email
    console.log(data.username.value, data.email.value);
  }
});

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