由于Angular利用了Typescript，开发者可以利用强类型。这在开发过程中是一个很大的帮助，因为你的IDE会在构建应用程序之前帮助你捕捉错误。这样一来，一旦IDE发出通知说出现了问题，你就可以立即修复问题。在这个概念上更进一步的是接口的使用。虽然JavaScript本身没有接口，但Typescript有。接口在Java、PHP和C#等面向对象的编程语言中非常常见。有了Typescript，我们现在也可以在前端使用它们。
什么是接口？
接口是一种规范，它确定了一个类要实现的相关属性和方法集。换句话说，一个给定的类在实现该接口时同意支持该规范。接口只是对属性和方法的定义，而实现该接口的类拥有这些定义的每个属性和方法的实际代码。在Typescript中，你可以把接口本身作为一个数据类型。Typescript中的接口只是一个开发时的概念，在构建过程后，它们不包括在最终的JavaScript中。
定义一个Angular接口
我们现在可以制作一个接口，用于我们的GameListComponent组件类。首先，让我们在games目录下添加一个 **game.ts**文件到游戏目录中。
添加以下代码。
export interface IGame {
gameId: number;
gameName: string;
gameCode: string;
releaseDate: string;
price: number;
description: string;
thumbRating: number;
imageUrl: string;
}
interface:使用接口关键字来定义一个接口IGame:描述类的接口名称，其前缀为大写的I
export:需要导出关键字，这样其他地方的类就可以根据自己的需要实现。
- 在大括号{ }之间的接口主体中，定义了必须在使用该接口的业务对象中创建的属性和方法。换句话说，如果一个类使用了上面的IGame接口，那么你可以指望它拥有上面列出的所有属性。
将接口作为数据类型使用
除了通过利用 implements 关键字来使用接口外，你还可以将接口作为一种数据类型来使用。让我们看看如何在GameListComponent组件类中使用我们新的IGame接口作为数据类型。
game-list.component.ts
import { Component } from '@angular/core';
import { IGame } from './game';
@Component({
selector: 'game-list',
templateUrl: './game-list.component.html'
})
export class GameListComponent {
pageTitle = 'Dynamic! Game List';
imageWidth = 45;
imageMargin = 1;
showImage = true;
listItem = 'Mario';
games: IGame[] = [...];
toggleImage(): void {
this.showImage = !this.showImage;
}
}
在上面的代码中，我们首先使用*import { IGame } from './game';*导入接口。然后，我们可以使用接口名称作为数据类型在 **games**属性的数据类型。这就是上面第二行强调的内容。
这个接口有什么用？
该 **games**数组现在有一个特定的数据类型为 IGame.这意味着填充该数组的数据必须与我们首先创建的接口中规定的属性完全匹配。换句话说，现在的游戏数组是强类型的。如果我们遗漏了什么或者有拼写错误，我们的IDE应该通知我们。让我们来测试一下。
首先，我们要把 gameId属性。在IDE中，我们马上得到一些明显的错误和带有TS2322错误信息的斜线。类型'{ 'gameName': string; 'gameCode': string; 'releaseDate': string; 'description': string; 'price': number; 'thumbRating': number; 'imageUrl': string; }'不能被分配给'IGame'类型。 类型'{ 'gameName': string; 'gameCode': string; 'releaseDate': string; 'description': string; 'price': number; 'thumbRating': number; 'imageUrl': string; }' 中缺少'gameId'属性。
基本上，它只是说，"嘿！你忘了这个游戏的gameId属性！"。所以这是一个捕捉错误的好方法，在你试图构建应用程序之前，确保你没有错过任何东西。
拼写错误的情况也是如此。比如我们在其中一个属性上有一个拼写错误。这里我们把price拼成了prices。我们再次看到一个TS2322的错误*。类型'{ 'gameId': number; 'gameName': string; 'gameCode': string; 'releaseDate': string; 'description': string; 'prices': number; 'thumbRating': number; 'imageUrl': string; }' 不能分配给类型'IGame'。 对象字面只能指定已知的属性，而 "价格 "在类型'IGame'中不存在。*
解决了这个拼写错误，你就可以了!接口与Typescript的强类型特性是相辅相成的。在浏览器中检查结果显示，应用程序和以前一样工作。然而，这样做的好处是，我们的代码更干净了，而且通过使用该接口，我们的代码更有条理。
总结
- 接口是用来定义自定义类型的，如我们上面创建的IGame接口。
- 接口在Angular应用程序中促进强类型化
- 使用接口关键字来定义一个接口
interface关键字来定义一个接口。 - 确保在创建接口时使用
export关键字创建一个接口 - 在接口主体中，定义需要的属性、方法和类型
- 在一个类上实现一个接口，使用
implements关键字 - 为接口中定义的每个属性和方法编写必要的代码
- 将接口作为数据类型使用，在冒号后写上接口的名称，就像这样--游戏。IGame[] = []
