TypeScript 如何从数组对象变量创建带约束的Record类型

首先，你需要先给原始的cssColorsObject加上as const断言，避免TypeScript将数组成员类型拓宽为通用的string，无法做具体颜色值的归属校验：

const cssColorsObject = {
    red: ["lightsalmon", "salmon", "darksalmon", "lightcoral", "indianred", "crimson", "firebrick", "red", "darkred"],
    orange: ["coral", "tomato", "orangered", "gold", "orange", "darkorange"],
    yellow: [/* 你的黄色系颜色值 */]
    // 其他色系分类
} as const;

场景1：允许仅包含部分色系键，每个键对应数组为该色系颜色子集 #

你整理的实现方案是正确的，代码如下：

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

校验示例：

const demo1: CssColorsPartial = {
    red: ["lightsalmon", "salmon"], // 合法
    orange: [], // 合法
    // yellow: ["lightsalmon"] // 报错，lightsalmon不属于yellow色系的合法值
}

场景2：强制必须包含所有色系键，仅数组值为对应色系颜色子集 #

去掉外层的Partial即可：

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

实现原理 #

• as const 断言将原始对象的所有属性值固定为字符串字面量类型，让TypeScript可以识别每个颜色值所属的色系分类
• 映射类型[Prop in keyof typeof cssColorsObject]会遍历原始对象的所有色系键
• 每个键对应的取值类型Array<typeof cssColorsObject[Prop][number]>，表示该数组的元素只能是当前键对应原始数组的成员子集，自动限制了跨色系的非法值
• Partial工具类型将所有键设为可选，支持仅使用部分色系的场景

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