如何從物件鍵的嵌套物件創建映射聯合型別

我正在嘗試創建基于設計令牌 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 檔案添加了更多顏色，我希望該型別自動更新，因此它必須遍歷結構而不是直接參考顏色名稱

uj5u.com熱心網友回復：

考慮這個例子：

const colorJSON = {
  "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 Colors = typeof colorJSON

type Values<T> = T[keyof T]

type ColorMap<T extends Record<string, Record<string, unknown>>> = {
  [Prop in keyof T]: keyof T[Prop]

}

type Result = Values<ColorMap<Colors>>

ColorMap - 遍歷 json 鍵（黑色/藍色/青色）并獲得嵌套 obj 的鍵的并集。

Values - 回傳所有物件值的聯合。

由于 Object 值是 keyof json 嵌套物件的ColorMap并Values集，comisition of和為您提供嵌套物件的所有鍵的并集。

PS 我認為您不需要遞回遍歷此物件型別。但是，如果您對遞回解決方案感興趣，可以查看我的文章

uj5u.com熱心網友回復：

您可以使用括號表示法導航到嵌套物件的型別并使用keyof，并在不同顏色之間交替：

type ColorJSON = typeof colorJSON;
type Color = keyof ColorJSON;
type Tint = keyof ColorJSON['Black'] | keyof ColorJSON['Blue'] | keyof ColorJSON['Teal']

對于此特定資料，您可以省略 Teal，因為其鍵已包含在 Blue 中。

標籤：打字稿 联合类型 映射类型

上一篇：打字稿：如何按欄位名稱對命名物件串列的物件進行分組

下一篇：React/TypeScript測驗失敗。“考慮使用“jsdom”測驗環境。”