如何从TypeScript数据类型自动生成带Setter的React Context类型？

可以通过TypeScript的键重映射（Key Remapping）特性，结合原数据类型的属性类型推导，自动生成包含对应setter的Context类型，避免手动维护类型一致性。

基础实现（匹配你手动定义的setter类型） #

type FruitData = {
  banana: string
  apple: number
  tomato: boolean
}

// 工具类型：为目标对象的每个属性生成对应setter
type Setters<T> = {
  [K in keyof T as `set${Capitalize<string & K>}`]: (value: T[K]) => void
}

// 自动生成Context类型
type FruitContext = FruitData & Setters<FruitData>

更贴合React useState的setter类型（支持回调更新） #

如果需要和useState返回的setter类型完全一致（支持传入值或回调函数），可以结合React内置的SetStateAction类型：

import { SetStateAction } from 'react'

type FruitData = {
  banana: string
  apple: number
  tomato: boolean
}

type Setters<T> = {
  [K in keyof T as `set${Capitalize<string & K>}`]: (value: SetStateAction<T[K]>) => void
}

type FruitContext = FruitData & Setters<FruitData>

原理说明 #

1. 键重映射：[K in keyof T as \set${Capitalize<string & K>}`] 会遍历T的每一个键K，将其转换为set + 首字母大写的键名格式（比如banana→setBanana`）。
2. 类型关联：通过T[K]直接获取原属性的类型，作为setter函数的参数类型，确保setter参数和原属性类型严格对应，无需手动维护。

当FruitData的属性类型或数量发生变化时，FruitContext会自动同步更新对应的setter类型，完全实现类型的自动推导。

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