这是我参与11月更文挑战的第11天，活动详情查看：11月更文挑战

在 TypeScript 中实现接口

JavaScript 不支持接口 ,但不代表不能实现它的作用.

TypeScript 中的接口概述

TypeScript 的核心原则之一是，类型检查关注相关值具有的形状。这有时称为“鸭子类型”或“结构子类型”。在 TypeScript 中，接口会充当命名这些类型的角色，并且是在代码内定义“代码协定”以及在项目外定义代码协定的一种强大方法。

什么是接口

可以使用接口来描述对象、命名和参数化对象的类型，以及将现有的命名对象类型组成新的对象类型。

此简单接口定义 Employee 对象的两个属性和一个方法。

interface Employee {
    firstName: string;
    lastName: string;
    fullName(): string;
}

该接口不会初始化或实现在其中声明的属性。这是因为接口的唯一任务是描述类型。它定义了代码协定所需的内容，而实现接口的变量、函数或类则通过提供所需的实现详细信息来满足协定。

此示例通过声明类型 Employee 的变量来实现接口。它通过传入 firstName 和 lastName 属性的值并指定 fullName 方法需结合使用 firstName 和 lastName 属性并返回结果，来实现约定。

let employee: Employee = {
    firstName : "Emil",
    lastName: "Andersson",
    fullName(): string {
        return this.firstName + " " + this.lastName;
    }
}
//类型检查   智能感知会提示
employee.firstName = 10;  //* Error - Type 'number' is not assignable to type 'string'

在 TypeScript 中使用接口的原因

为常用类型创建简写名称。即使是使用一个简单的接口（如前面示例中声明的接口），可以享受 Intellisense 和类型检查带来的好处。
在一组对象中保持一致性，因为实现接口的每个对象都在相同的类型定义下运行。实现接口的对象必须实现接口的所有必需成员。因此，如果未传递正确类型的所有必需参数，TypeScript 编译器将引发错误。
描述现有的 JavaScript API 并阐明函数参数和返回类型。这在使用 jQuery 等 JavaScript 库时特别有用。接口可以让你清楚地了解函数的期望值和返回值，而无需重复访问文档。

接口与类型别名有何不同？

可以用但不好

上述 Employee 接口还可以使用 type 键字表示为类型别名：

type Employee = {
    firstName: string;
    lastName: string;
    fullName(): string;
}

类型别名是数据类型（例如联合、基元、交集、元组或其他任何类型）的定义。另一方面，接口是描述数据形状（例如对象）的一种方法。类型别名可以像接口一样使用；但有一些细微的差异。主要区别在于，不能重新打开类型别名以添加新属性，而接口始终是可扩展的。此外，只能使用类型别名描述并集或元组。

属性类型	说明	示例
必须	除非另行指定，否则所有属性都是必需的。	`firstName: string;`
可选	在属性名称的末尾添加问号 (`?`)。对于不是必需的属性，请使用此属性。这可以防止类型系统在省略该属性时引发错误。	`firstName?: string;`
只读	在属性名称的前面添加 readonly 关键字。对于只应在首次创建对象时修改的属性，请使用此属性。	`readonly firstName: string;`

声明具有成员的接口

声明一个名为 IceCream 的接口，该接口包括两个属性：作为 string 的 flavor 和作为 number. 的 scoops

interface IceCream {
   flavor: string;
   scoops: number;
}

现在，你可以实现新的接口

let iceCream: IceCream = {
   flavor: 'vanilla',
   scoops: 2
}

console.log(iceCream.flavor);

接下来，在底部创建一个名为 tooManyScoops 的函数，该函数使用 IceCream 接口作为参数类型。此函数检查 IceCream 对象中的勺数，并根据结果返回一条消息。若要测试你的工作，请将对象 {flavor: 'vanilla', scoops: 5} 作为参数传递，并通过将其返回到控制台来检查结果。

function tooManyScoops(dessert: IceCream) {
   if (dessert.scoops >= 4) {
      return dessert.scoops + ' is too many scoops!';
   } else {
      return 'Your order will be ready soon!';
   }
}

console.log(tooManyScoops({flavor: 'vanilla', scoops: 5}));

经过编译之后我们可以在 Chrome的console看到结果在source上看到代码可以看到JS并不支持接口

在 TypeScript 中实现接口day3