如何在TypeScript中基于属性值定义类型？修复KeyMapper类型

问题分析 #

原KeyMapper类型中，mapper的值类型被定义为T[keyof T]，即目标对象所有属性类型的联合类型。这导致即使指定了targetKey为某个具体属性，mapper仍然可以接受其他属性的有效值，无法建立targetKey与mapper值类型的强关联，因此示例中第二个元素的错误赋值不会触发TypeScript报错。

解决方案 #

通过遍历目标对象的每个属性，为每个属性单独生成对应的KeyMapper子类型，最终取所有子类型的联合。这样每个数组元素必须匹配某个属性对应的targetKey和其有效值类型，实现类型强关联。

修复后的类型定义 #

type KeyMapper<T extends object> = {
  [K in keyof T]: {
    targetKey: K;
    mapper: {
      [key: string]: T[K];
    };
  };
}[keyof T];

验证示例 #

使用修复后的类型，原示例中的错误赋值会被TypeScript正确检测：

type ButtonProps = {
  hierarchy: 'primary' | 'secondary' | 'tertiary';
  styleSemantic: 'info' | 'success' | 'alert' | 'warning';
};

const keyMapperArray: KeyMapper<ButtonProps>[] = [
  {
    targetKey: 'hierarchy',
    mapper: {
      filled: 'primary' // 合法，匹配hierarchy类型
    }
  },
  {
    targetKey: 'styleSemantic',
    mapper: {
      error: 'primary' // TypeScript报错：类型'"primary"'不能赋值给类型'"info" | "success" | "alert" | "warning"'
    }
  }
];

内容的提问来源于stack exchange，提问作者Eduardo Alcebíades