TypeScript 结构化类型初探

啥是鸭子类型？

作为一个前端程序员，想必大家都知道 javascript 是一个弱类型语言，如果需要类型的支持，那就需要借助 typescript 来实现，但是大家可曾听过这样一个说法？

javascript 属于鸭子类型

当我第一次看到这个说法时，我不禁哈哈大笑，鸭子类型是啥？其实这不过是一个比喻而已，鸭子类型的意思是：

如果一个动物看起来像鸭子，游起泳来像鸭子，叫起来也像鸭子，那么它大概率就是鸭子。

结构化类型

TypeScript 使用结构化类型（Structural Typing）来实现 javascript 中的鸭子类型，结构化类型描述的是两个类型之间的兼容性，我们看一个具体的例子，再下结论。

假设你正在开发一个 3D 图形应用程序，这个程序最基本的功能就是绘制图形，而绘制图形最基本的数据结构就是点，我们先定义一个 2D 点。

interface Point2D {  x: number;  y: number;}

当然，要绘制 3D 图形，我们还需要一个 3D 点。

interface Point3D {  x: number;  y: number;  z: number;}

现在我们可以下结论了，Point3D与Point2D是兼容的，因为Point3D包含了所有Point2D的属性。

所以结构化类型的定义如下：

如果一个类型 B 包含了另一个类型 A 的所有属性，那么这两个类型是兼容的，我们可以将类型 B 赋值给类型 A。

需要注意的是，这种兼容性是单向的，Point3D可以赋值给Point2D，但反之不行，因为Point2D缺少了z属性。

其实这不难理解，假设我们要绘制一条 2D 线段，需要两个点来表示这条线段的起点和终点。

function drawLine(start: Point2D, end: Point2D) {  // 绘制线段的逻辑}

那么如果我们传入的是Point3D类型的点，程序依然可以正常工作，因为Point3D包含了Point2D的所有属性。多出来的z属性直接忽略，并不影响结果。

const start: Point3D = { x: 0, y: 0, z: 0 };const end: Point3D = { x: 1, y: 1, z: 1 };drawLine(start, end); // 依然可以正常绘制线段

我们甚至不需要传递一个Point3D类型的点，任意一个包含x和y属性的对象都可以作为参数传递给drawLine函数。

const start = { x: 0, y: 0 };const end = { x: 1, y: 1 };drawLine(start, end); // 依然可以正常绘制线段

这就是结构化类型的威力，也是 JavaScript 的灵活性所在。

名义类型

与结构化类型对应的是名义类型（Nominal Typing），比如Java和C#这种强类型语言，使用的都是名义类型，名义类型要求类型的名称必须匹配才能兼容。也就是说，只有当两个类型的名称完全相同或者存在继承关系时，它们才被认为是兼容的。

对于Java或者C#这样的强类型语言来说，上面drawLine的例子就不成立了，因为Point2D和Point3D是两个不同的类型，即使它们有相同的属性，也不能互相替换。

class Point2D {    int x;    int y;}
class Point3D {    int x;    int y;    int z;}
void drawLine(Point2D start, Point2D end) {    // 绘制线段的逻辑}
Point3D start = new Point3D(); // 定义起点Point3D end = new Point3D(); // 定义终点drawLine(start, end); // 编译错误，Point3D不是Point2D类型

基于这个原因，在强类型语言中如果要实现类型兼容性的话，只能通过继承来实现。

class Point2D {    int x;    int y;}
class Point3D extends Point2D {    int z;}
void drawLine(Point2D start, Point2D end) {    // 绘制线段的逻辑}
Point3D start = new Point3D(); // 定义起点Point3D end = new Point3D(); // 定义终点drawLine(start, end); // 现在可以正常工作

上面的例子中，Point3D继承自Point2D，这就意味着Point3D是一个Point2D类型的对象，可以在需要Point2D的地方使用。

文章转载自：前端风云志

原文链接：https://www.cnblogs.com/graphics/p/18967447

体验地址：http://www.jnpfsoft.com/?from=001YH