如何在TypeScript中基于对象的一个键推断另一个键的类型

你的问题核心是当前的联合类型没有让type字段和对应的getter/setter类型形成严格绑定，导致TypeScript无法根据type的值自动窄化函数的参数和返回值类型。

修正后的类型定义 #

type ElementValues = {
    text: string,
    checkbox: boolean
}

// 生成每个组件对应的完整类型，确保type与getter/setter严格关联
type ComponentConfig<Type extends keyof ElementValues> = {
    type: Type;
    getter: () => ElementValues[Type];
    setter: (value: ElementValues[Type]) => void;
};

// 生成所有组件类型的联合类型
type ComponentConfigs = {
    [K in keyof ElementValues]: ComponentConfig<K>;
}[keyof ElementValues];

// 数组类型为联合类型的数组
const testList: ComponentConfigs[] = [
    {
        type: 'checkbox',
        getter: () => true, // 必须返回boolean，否则报错
        setter: (value) => { /* value自动推断为boolean */ }
    },
    {
        type: 'text',
        getter: () => 'hello', // 必须返回string
        setter: (value) => { /* value自动推断为string */ }
    }
];

关键说明 #

• 定义ComponentConfig泛型类型，明确将type字段的类型与getter的返回值、setter的参数类型绑定在一起。
• 通过映射类型生成包含所有组件配置的联合类型ComponentConfigs，每个联合成员都是独立的、类型严格一致的组件配置。
• 当你在数组中指定type字段时，TypeScript会自动根据type的值，推断出getter和setter的具体类型，从而实现精准的类型校验。

比如在type: 'checkbox'的元素中，getter必须返回boolean，setter的参数也只能是boolean，如果传入string类型会直接触发TypeScript的类型错误，完全符合你的需求。

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