问题

使用TypeScript的文字类型，我能够确保对象值由Color和字符串-primary组成。

type Color = "green" | "blue" | "orange" | "red" | "purple" | "pink";
type ColorObject<Key extends string = Color> = Record<Key, `${Key}-primary">;

const COLORS: ColorObject = {
    green: "green-primary",
    blue: "blue-primary",
    orange: "orange-primary",
    red: "red-primary",
    purple: "purple-primary",
    pink: "pink-primary"
};

但我想确保值与键相同，即：

pink: "pink-primary" // 好
pink: "red-primary" // 不好

我进行了相当多的搜索，不确定在我写这个回答的时候是否可能... 有什么想法吗？

type Color = "green" | "blue" | "orange" | "red" | "purple" | "pink";
type ColorObject<Key extends string = Color> = Record<Key, `${Key}-primary`>;

const COLORS: ColorObject = {
    green: "green-primary",
    blue: "blue-primary",
    orange: "orange-primary",
    red: "red-primary",
    purple: "purple-primary",
    pink: "pink-primary"
};

pink: "pink-primary" // good
pink: "red-primary" // bad

答案1

得分: 3

你应该使用mapped types来实现这个目标。在你当前的实现中，你的类型允许任何字符串颜色具有值中的任何颜色。相反，通过使用映射类型，我们将分别映射颜色并为它们分配相应的值：

type Color = 'green' | 'blue' | 'orange' | 'red' | 'purple' | 'pink';
type ColorObject<Key extends string = Color> = {
  [K in Key]: `${K}-primary`;
};

const COLORS: ColorObject = {
  green: 'green-primary',
  blue: 'orange-primary', // 预期错误
  orange: 'orange-primary',
  red: 'red-primary',
  purple: 'purple-primary',
  pink: 'pink-primary',
};

playground

<details>
<summary>英文:</summary>

You should use [mapped types](https://www.typescriptlang.org/docs/handbook/2/mapped-types.html) to achieve it. In your current implementation, your type allows any string color to have any of the colors in the value. Instead by using mapped typed we will map through the colors separately and assign the corresponding value to them:

type Color = 'green' | 'blue' | 'orange' | 'red' | 'purple' | 'pink';
type ColorObject<Key extends string = Color> = {
[K in Key]: ${K}-primary;
};

const COLORS: ColorObject = {
green: 'green-primary',
blue: 'orange-primary', // expected error
orange: 'orange-primary',
red: 'red-primary',
purple: 'purple-primary',
pink: 'pink-primary',
};

[playground](https://www.typescriptlang.org/play?ts=5.0.4#code/C4TwDgpgBAwg9gGzgJygXigcgObIhAO0ygB8sAjBAVwmLMxQEMDtbSs8ATOrMK5MAjb0wASwIBrTAG4AUKEixEKAPLkAVhADGwADwBpCCCgQAHsEKcAzlCvBk47OiVJkAPmcBvWVCgBtfShxKEMQAF0ALigAAwAST30AXwBaMAcAW0ZkEGi5RLlZLTgCO1gVABkVACUAZSj4VzVNHS8fKFx8AiicPEJUjKyQTAAaNsoabqYWCH7RTOyRqAB6JZNTSB0IThNkZBQ2qdZJ5GZWWfmh0d8ubq5zwZG2vgEhbufBGbS5h6uoMUk3uIJPcFqN8rIgA)

</details>