如何使Typescript接口属性依赖于另一个属性

Question

考虑一个例子:

type Colors = {
light: 'EC3333' | 'E91515'
dark: '#100F0F' | '140F0F' 
}
interface Palette {
colorType: keyof Colors
color: Colors[keyof Colors]
}

是否有办法使color属性的类型依赖于colorType属性?

含义-当我选择colorTypelight时，colortype应该变成'EC3333' | 'E91515'

Answer 1

您不能将Palette表示为单个非泛型interface，但您可以使其成为colorType和color的每个期望配对的并集:

type Palette = {
colorType: "light";
color: "EC3333" | "E91515";
} | {
colorType: "dark";
color: "#100F0F" | "140F0F";
}

你甚至可以让编译器从Colors中为你计算，通过映射Colors的键，然后立即索引到生成的映射对象类型:

type Palette = { [K in keyof Colors]: {
colorType: K
color: Colors[K]
} }[keyof Colors]; 

您可以通过智能感知验证，这将导致与以前相同的类型，其优点是，如果您更改Colors，它将自动更新。

---

有了这个联合类型，您可以开始使用Palette，并看到强制和理解约束:

const badPalette: Palette = {
colorType: "dark",
color: "E91515" 
} // error!
const goodPalette: Palette = {
colorType: "dark",
color: "140F0F" 
} // okay

Playground链接到代码