如何为Palette对象指定键子集创建TypeScript联合类型？

步骤1：确保Palette对象保留字面量类型 #

先给你的Palette对象加上as const断言，让TypeScript捕获精确的键和子键类型，而不是宽泛的string：

const palette = {
    black: "#000",
    white: "#fff",
    primary: {
      "50": "#somecolor",
      "100": "#somecolor",
      "300": "#somecolor",
      "500": "#somecolor",
      "700": "#somecolor",
    },
    grey: {
      "50": "#somecolor",
      "300": "#somecolor",
      "500": "#somecolor",
      "700": "#somecolor",
      "900": "#somecolor",
    },
    green: {
      "100": "#somecolor",
      "300": "#somecolor",
      "500": "#somecolor",
      "700": "#somecolor",
    },
    blue: {
      "100": "#somecolor",
      "300": "#somecolor",
      "500": "#somecolor",
      "700": "#somecolor",
    },
    pink: {
      "100": "#somecolor",
      "300": "#somecolor",
      "500": "#somecolor",
      "700": "#somecolor",
    },
    red: {
      "300": "#somecolor",
      "500": "#somecolor",
      "700": "#somecolor",
    },
    background: {
      "500": "#somecolor",
      "700": "#somecolor",
    }
} as const;

步骤2：创建目标Theme类型 #

根据需求有两种实现方式：

方式1：手动指定固定联合类型

如果只需要固定的几个键，直接写联合类型最直观：

type Theme = "blue" | "green" | "primary" | "pink";

方式2：自动筛选含指定子键的属性（可选）

如果想自动筛选出包含500子键的Palette属性（避免手动维护），可以用TypeScript条件类型：

// 获取Palette所有键的类型
type PaletteKeys = keyof typeof palette;

// 筛选出对应属性包含"500"子键的键
type ThemeWith500 = PaletteKeys extends keyof typeof palette 
  ? "500" extends keyof typeof palette[PaletteKeys] 
    ? PaletteKeys 
    : never 
  : never;

// 若只需要其中特定几个，用Extract进一步筛选
type Theme = Extract<ThemeWith500, "blue" | "green" | "primary" | "pink">;

步骤3：使用Theme类型实现安全取值 #

现在可以用Theme类型的变量安全访问palette的对应属性和500子键：

// 定义取值函数
const getCurrentColor = (theme: Theme) => {
  return palette[theme]["500"];
};

// 调用示例
const currentBlue = getCurrentColor("blue"); // 类型为字面量"#somecolor"
const currentPrimary = getCurrentColor("primary"); // 类型完全安全

注意事项 #

• 如果palette是从其他文件导入的，导出时需加上as const或标记为readonly，否则TypeScript会把键推断为宽泛的string，无法提取字面量类型。
• 该方案在Next.js + React Native环境下完全兼容，无需额外配置。

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