如何使用TypeScript确保对象值与对应键匹配？

你当前的代码里，Record<Key, ${Key}-primary>的写法会让每个键的取值变成所有${Color}-primary的联合类型，导致没法约束键和值的一一对应关系。要解决这个问题，改用**映射类型（Mapped Types）**就能实现每个键对应唯一合法值的约束。

解决方案代码 #

type Color = "green" | "blue" | "orange" | "red" | "purple" | "pink";

// 用映射类型为每个Color成员单独绑定对应的值类型
type ColorObject = {
  [K in Color]: `${K}-primary`;
};

// 合法定义：每个键的值严格匹配`${键名}-primary`
const COLORS: ColorObject = {
    green: "green-primary",
    blue: "blue-primary",
    orange: "orange-primary",
    red: "red-primary",
    purple: "purple-primary",
    pink: "pink-primary"
};

// 非法定义：TypeScript会直接报错
const INVALID_COLORS: ColorObject = {
    green: "red-primary", // 错误：'"red-primary"' 不能赋值给 '"green-primary"'
    blue: "blue-primary",
    // ...其他键
};

原理说明 #

原来的Record类型会把Key对应的${Key}-primary展开成所有可能的联合类型（比如"green-primary" | "blue-primary" | ...），这就导致每个键都能接受任意一个联合类型的值。而映射类型[K in Color]: ${K}-primary``会遍历Color的每个成员，为每个键K单独生成对应的${K}-primary类型，从而强制键和值严格对应。

扩展：支持自定义键的泛型版本 #

如果需要让ColorObject支持任意自定义的字符串字面量键，可以用泛型映射类型：

type ColorObject<Key extends string> = {
  [K in Key]: `${K}-primary`;
};

// 使用示例
type CustomColor = "cyan" | "yellow";
const CUSTOM_COLORS: ColorObject<CustomColor> = {
    cyan: "cyan-primary",
    yellow: "yellow-primary"
};

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