TypeScript如何从设计令牌JSON嵌套对象键生成映射联合类型

我正尝试基于设计令牌JSON文件创建类型。

该JSON对象格式如下：

{
    "Black": {
        "4": { "value": "#f6f6f6" },
        "6": { "value": "#f2f2f2" },
        "10": { "value": "#e8e8e8" },
        "20": { "value": "#d3d3d3" },
        "30": { "value": "#bcbcbc" },
        "40": { "value": "#a7a7a7" },
        "50": { "value": "#909090" },
        "60": { "value": "#7b7b7b" },
        "70": { "value": "#646464" },
        "80": { "value": "#4e4e4e" },
        "90": { "value": "#383838" },
        "100": { "value": "#222222" }
    },
    "Blue": {
        "4": { "value": "#F5F8F8" },
        "8": { "value": "#EBF0F1" },
        "10": { "value": "#E5EBED" },
        "20": { "value": "#CCD9DC" },
        "30": { "value": "#B2C5CA" },
        "40": { "value": "#99B3B9" },
        "50": { "value": "#7F9FA7" },
        "60": { "value": "#668C96" },
        "70": { "value": "#4C7984" },
        "80": { "value": "#336673" },
        "100": { "value": "#004050" }
    },
    "Teal": {
        "20": { "value": "#ccfbf0" },
        "40": { "value": "#99f8e1" },
        "60": { "value": "#66f4d3" },
        "80": { "value": "#33f1c4" },
        "100": { "value": "#00edb5" }
    }
}

我已经通过type Color = keyof typeof colorJSON;创建了颜色的联合类型。
现在我想要再创建一个联合类型，包含所有颜色对象下嵌套的色调层级键值，比如type Tint = '4' | '6' | '8' etc...，但我不知道如何递归遍历所有颜色并引用其内部键。

编辑
我希望JSON文件新增更多颜色时该类型能自动更新，因此必须遍历结构而非直接引用颜色名称。

解决方案 #

直接用TypeScript的索引访问类型即可实现，无需额外递归逻辑，写法如下：

type Tint = keyof typeof colorJSON[keyof typeof colorJSON]

原理解释

1. typeof colorJSON[keyof typeof colorJSON] 会先拿到所有颜色对应的第二层对象的联合类型
2. 外层keyof会自动提取这个联合类型的所有键，合并为并集，最终得到所有色调值的联合类型

这个写法完全满足自动更新要求：后续新增颜色、新增色调值时，Tint类型会自动同步更新，不需要修改任何类型定义代码。
针对你给出的示例JSON，生成的Tint类型等价于：

type Tint = "4" | "6" | "8" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "100"

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