从打字稿中的数组变量对象创建记录

Question

我有一个变量是数组的对象：

cssColorsObject = {
    red: ["lightsalmon", "salmon", "darksalmon", "lightcoral", "indianred", "crimson", "firebrick", "red", "darkred"],
    orange: ["coral", "tomato", "orangered", "gold", "orange", "darkorange"],
    yellow: [...
}

我想为未来的对象变量创建一个类型/接口，其中包含一些键（例如“red”、“orange”、“yellow”）以及部分或全部键颜色的属性，例如：

{
    red: ["lightsalmon", "salmon"], // OK
    orange: [], //OK
    yellow: ["lightsalmon"], // NOT OK - because light salmon is a color associated with the "red" key in the original object
}

我已经解决了以下问题：

type CssColorKeys = keyof typeof cssColorsObject; // = "red" | "orange" | "yellow" | "green" , etc
type CssColorValues = typeof cssColorsObject[CssColorKeys][number]; // = "lightsalmon" | "salmon"... | "maroon"
type NewRecord = Record<CssColorKeys, CssColorValues> // Not what I want as this requires all properties and the exact same array.

我想我需要使用部分，但我正在努力在这里实现它们。

---

完全感谢@captain-yossarian 在下面的回答。我只是想根据他的回答添加一个简化的解决方案：

type CssColorsPartial = Partial<{
    [Prop in keyof typeof cssColorsObject]: Array<typeof cssColorsObject[Prop][number]>;
}>;

我为具有强制键和可选数组值here 的映射类型创建了另一个type

Answer 1

首先，您需要使cssColorsObject 不可变。

const cssColorsObject = {
    red: ["lightsalmon", "salmon", "darksalmon", "lightcoral", "indianred", "crimson", "firebrick", "red", "darkred"],
    orange: ["coral", "tomato", "orangered", "gold", "orange", "darkorange"],
    yellow: ['lemon']
} as const

然后遍历cssColorsObject 键并创建所需的类型。

type PartialCSS<T extends Record<string, ReadonlyArray<string>>> =
    Partial<{
        [Prop in keyof T]: Array<T[Prop][number]>
    }>

我曾经将 T[Prop] 数组解压缩到新的类似 Array<T[Prop][number]> 中，因为 T[Prop] 是不可变的元组，其中元素的顺序被保留，而新类型不需要确切的元素顺序。缺点，它允许你使用两个相似的元素。

完整代码：

const cssColorsObject = {
    red: ["lightsalmon", "salmon", "darksalmon", "lightcoral", "indianred", "crimson", "firebrick", "red", "darkred"],
    orange: ["coral", "tomato", "orangered", "gold", "orange", "darkorange"],
    yellow: ['lemon']
} as const


type PartialCSS<T extends Record<string, ReadonlyArray<string>>> =
    Partial<{
        [Prop in keyof T]: Array<T[Prop][number]>
    }>

const result: PartialCSS<typeof cssColorsObject> = {
    red: ['salmon'],
    yellow:['salmon'] // expected error
}

Playground