打字稿，将类型从对象映射到元组

Question

考虑以下接口：

interface Theme {
  color: {
    primary: {
      light: string
      base: string
      dark: string
    }
    secondary: {
      lighter: string
      light: string
      base: string
      dark: string
      darker: string
    }
  }
}

我正在尝试编写一种允许元组的类型，第一个元素映射到 中的任何键colors，第二个元素映射到其下的任何键（即：）base。

IE：

['primary', 'light'] ? valid
['secondary', 'darker'] ? valid
['primary', 'darker']  invalid

这是我在tsplayground 上进行的一次尝试，我在这里面临的问题是，如果我想允许多个键作为第一个参数传递，那么第二个需要满足所有第一个参数。有没有办法告诉打字稿使用作为类型传递的文字值？

type PickThemeColor<C extends keyof Theme['color'] = keyof Theme['color']> = [
  C,
  keyof Theme['color'][C]
]

//  this complains because 'darker' doesnt appear in both 'primary' and 'secondary' keys

const x: PickThemeColor<'primary' | 'secondary'> = ['secondary', 'darker']

Answer 1

事实上你们非常接近。唯一缺少的是分配颜色键：

type ColorKey = keyof Theme['color'];
type ShadeKey<K extends ColorKey> = keyof Theme['color'][K];

type PickThemeColor<C extends ColorKey> = C extends ColorKey ? [C, ShadeKey<C>] : never;

const x1: PickThemeColor<'primary' | 'secondary'> = ['primary', 'light'] // OK
const x2: PickThemeColor<'primary' | 'secondary'> = ['secondary', 'darker'] // OK
const x3: PickThemeColor<'primary' | 'secondary'> = ['primary', 'darker'] // Error

操场

ColorKey并ShadeKey在其中提取只是为了简化PickThemeColor（这里没有什么新内容）。造成差异的是C extends ColorKey部分，因为它分布在颜色键的联合上。

所以PickThemeColor<'primary'>会产生
["primary", "light" | "base" | "dark"]

并PickThemeColor<'primary' | 'secondary'>会产生
["primary", ShadeKey<"primary">] | ["secondary", ShadeKey<"secondary">]