如何从对象键推导TypeScript类型？ColorVariant生成问题求助

问题原因 #

当ColorOptions为(typeof PALETTE)[Colors]时，它是common、primary、error、success四个子对象类型的联合类型。keyof作用于联合类型时，仅会返回所有成员类型的共同键。由于common的子键是"black"/"white"，其他组的子键是25/50/100，二者无共同键，因此Tone类型被推导为never，最终${Colors}.${Tone}的结果也是never。

修复方案 #

使用分布条件类型遍历每个颜色分组，单独拼接分组名和其子键：

const PALETTE = {
  common: {
    black: "#000",
    white: "#fff",
  },
  primary: {
    25: "#FAFAFF",
    50: "#F5F5FF",
    100: "#E7E7FC",
  },
  error: {
    25: "#FFFBFA",
    50: "#FEF3F2",
    100: "#FEE4E2",
  },
  success: {
    25: "#F6FEF9",
    50: "#ECFDF3",
    100: "#D1FADF",
  },
} as const;

// 遍历每个颜色分组，拼接分组名和子键
export type ColorVariant = {
  [C in keyof typeof PALETTE]: `${C & string}.${keyof (typeof PALETTE)[C] & string}`
}[keyof typeof PALETTE];

代码解释 #

1. 定义映射类型，对每个颜色分组C，生成该分组下所有子键与分组名拼接的字符串类型；
2. 通过[keyof typeof PALETTE]取出映射类型的所有值，得到所有可能的ColorVariant联合类型；
3. 使用& string确保模板字符串中的类型为字符串字面量（部分子键为数字类型，需转换为字符串字面量才能参与模板拼接）。

最终推导的ColorVariant符合预期：

type ColorVariant = "common.black" | "common.white" | "primary.25" | "primary.50" | "primary.100" | "error.25" | "error.50" | "error.100" | "success.25" | "success.50" | "success.100"

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