如何创建仅含FormData单个键值对的TypeScript类型用于React函数？

你可以通过映射类型结合联合类型提取的方式实现这个需求，具体步骤如下：

1. 先定义你的基础类型FormData：

type FormData = {
  field1: string;
  field2: string;
  fieldN: string; 
};

2. 创建表示单个键值对的类型SingleFormField：

type SingleFormField = {
  [K in keyof FormData]: { [P in K]: FormData[P] }
}[keyof FormData];

这个类型的逻辑是：

• 先通过映射类型，为FormData的每个键K生成仅包含该键的对象类型（比如{ field1: string }、{ field2: string }）
• 再通过[keyof FormData]提取所有单字段类型，组成一个联合类型

3. 给React函数添加类型标注：

const handleSingleField = (data: SingleFormField): void => {
  // 函数逻辑
};

调用函数时，只能传入FormData中某一个键对应的单键值对对象，比如{ field1: "test" }或{ field2: "demo" }，多传字段或传不存在的字段都会触发TypeScript报错。

如果需要复用这个逻辑，可以封装成通用工具类型：

type SingleKeyObject<T> = {
  [K in keyof T]: { [P in K]: T[P] }
}[keyof T];

// 使用时：
type SingleFormField = SingleKeyObject<FormData>;

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