精进TypeScript--优选接口的联合，而不是联合的接口

本文主要是介绍精进TypeScript--优选接口的联合，而不是联合的接口，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

如果你创建的一个属性是联合类型的接口，你应该问一下这个类型作为更精确的接口的联合是否更有意义

要记住的事情：

具有多个属性对于联合类型的接口通常是一个错误的选择，因为它们掩盖了这些属性之间的关系
接口的联合更精确，且可以被 TypeScript 所理解

假设你正在构建一个矢量绘图程序，并希望为具有特定几何类型的图层定义一个接口。

interface Layer {layout: FillLayout | LineLayout | PointLayout;paint: FillPaint | LinePaint | PointPaint;
}

字段layout控制形状的绘制方式和位置（是圆角还是直角），而 paint 字段控制样式（线条颜色、粗细、虚实等）

如果有一个图层，它的 layout 是 LineLayout，但它的 paint 属性是FillPaint，这样有意义吗？可能没有意义，允许这种可能性会使得使用库时更容易出错，并且使这个接口难以使用。

一个更好的建模方式是为每一种类型的图层提供单独的接口：

interface FillLayer {layout: FillLayout;paint: FillPaint;
}
interface LineLayer {layout: LineLayout;paint: LinePaint;
}
interface PointLayer {layout: PointLayout;paint: PointPaint;
}
type Layer = FillLayer | LineLayer | PointLayer;

以这种方式定义 Layer，你就可以排除混合 layout 和 point 属性的可能性。

这种模式最常见的例子是 “标签联合类型”，在这种情况下，其中一个属性是字符串字面量类型的联合：

interface FillLayer {type: 'fill';layout: FillLayout;paint: FillPaint;
}
interface LineLayer {type: 'line';layout: LineLayout;paint: LinePaint;
}
interface PointLayer {type: 'point';layout: PointLayout;paint: PointPaint;
}
type Layer = FillLayer | LineLayer | PointLayer;

type 属性就是“标签”，可以用来确定你在运行时处理的 Layer 是哪种类型。TypeScript 也能够根据标签来收缩 Layer 的类型：

function drawLayer(layer: Layer) {if (layer.type === 'fill') {const {paint} = layer; // FillPaintconst {layout} = layer; // FillLayout} else if (layer.type === 'line') {const {paint} = layer; // LinePaintconst {layout} = layer; // LineLayout} else {const {paint} = layer; // PointPaintconst {layout} = layer; // PointLayout}
}

通过正确地对这个类型中属性之间的关系进行建模，你可以帮助 TypeScript 检查你的代码的正确性。但是使用同样的代码初始化 Layer 会被类型断言弄得杂乱无章。

因为标签联合类型与 TypeScript 的类型检查器配合得很好，所以它们在 TypeScript 代码中是无处不在的。你要了解这个模式，并在合适的时候应用它。

如果你把可选字段视为它们的类型和 undefined 的联合类型，那么它们也适合这种模式。考虑一下这个类型：

interface Person {name: string;palceOfBirth?: string; // 这些要么存在、要么不存在dateOfBirth?: Date;
}

一个带有类型信息的注释是表明可能存在问题的强烈信号。在 palceOfBirth和 dateOfBirth 字段之间可能存在一个你还有告诉 TypeScript 的关系。

一个更好的建模方式是将这两个属性移动到一个对象中。这类似于将null移动到边界上：

interface Person {name: string;birth?: {place: string;date: Date;}
}

如果类型的结构不在你的控制范围内（例如，一个 API 接口），那么你仍然可以使用现在很熟悉的接口的联合来建模这些字段之间的关系：

interface Name {name: string;
}interface PersonWithBirth extends Name {placeOfBirth: string;dateOfBirth: Date;
}type Person = Name | PersonWithBirth;
// 这样的好处：
function eulogize(p: Person) {if ('placeOfBirth' in p) {const {dateOfBirth} = p; // OK，类型是 Date}
}