如何在TypeScript中合并泛型生成的键类型？优化React useState辅助类型

你需要的是让Builder类型直接生成包含状态字段和对应setter字段的单一对象类型，而非交叉类型。可以通过联合键映射+条件类型实现，同时修正原类型中setter类型的错误（原代码里把setClicked的类型设为了状态类型S，正确类型应为Dispatch<SetStateAction<S>>）：

import { type Dispatch, type SetStateAction } from 'react';

// 生成setter的键名
export type Name<N extends string> = `set${Capitalize<N>}`;

// 修正后的Builder类型
export type Builder<N extends string, S> = {
  [K in N | Name<N>]: K extends N 
    ? S 
    : Dispatch<SetStateAction<S>>;
};

使用示例 #

定义组件Props时，直接与其他字段合并即可：

type Props = {
  className: string;
} & Builder<'clicked', boolean>;

此时TypeScript会将Props显示为单一对象类型，而非交叉类型：

type Props = {
  className: string;
  clicked: boolean;
  setClicked: Dispatch<SetStateAction<boolean>>;
};

原理说明 #

• 用N | Name<N>作为映射的键联合类型，确保同时包含状态字段和setter字段
• 通过条件类型K extends N ? S : Dispatch<SetStateAction<S>>，为不同的键分配对应的类型
• 这种方式生成的是一个单一的对象类型，而非多个对象的交叉，解决了原代码中类型显示分散的问题

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