自ES6开始，JavaScript中已经有了类，TypeScript中类存在的时间甚至更长。然而TypeScript中也有接口的概念，在代码中添加类型声明时，经常会出现这样的问题:
对于这种类型声明是使用接口还是使用类？
本文聚集TypeScript中接口和类概念比较，这样我们能很好地回答这个问题。
1.从示例开始
为了理解本文，下面先给一个示例：
fetch('https://test.com/foo/bar')
.then((response) => {
console.log(response.status) // Some HTTP status code, such as 200
})
1
2
3
4
这里只是示意很常见的一个任务————从远程服务器获取数据，然后进一步处理数据。
如何现在使用TypeScript处理上面代码，它会对response进行类型推断得到any类型。因为通过代码无法分析其应该属于何种类型。
为了增加程序类型安全，我们需要给response增加显示类型声明，请看下面代码告诉TypeScript编译器：
fetch('https://test.com/foo/bar')
.then((response : Response) => {
console.log(response.status) // Some HTTP status code, such as 200
})
1
2
3
4
现在再回想前面提到的问题，新的Response应该被定义为interface还是class？
2. 接口
TypeScript检查程序不同类型时，其中关键方法是使用“鸭子方法”。
如果看起来像鸭子，叫起来像鸭子，那就是一个鸭子
也就是说，我们决定什么能被类型化一种特定类型，主要看起是否有需要特性/结构/形状(后面就称为形状)。在TypeScript中，interface是用于给这种特定形状事物赋予名称的一种方法，后面在程序中可以通过名称引用它。
下面使用duck进行类比，使用接口进行定义：
// A duck must have...
interface Duck {
// `hasWings` property with the value `true` (boolean literal type)
hasWings: true
// `noOfFeet` property with the value `2` (number literal type)
noOfFeet: 2
// `quack` method which does not return anything
quack(): void
}
1
2
3
4
5
6
7
8
9
有了Duck类型，我们在代码中可以其定义duck实例（通过实现Duck接口）：
// 可以通过编译
const duck: Duck = {
hasWings: true,
noOfFeet: 2,
quack() {
console.log('Quack!')
},
}
// 下面这句代码不能通过编译
const notADuck: Duck = {}
// The TypeScript compiler would tell us
// "Type '{}' is not assignable to type 'Duck'.
// Property 'hasWings' is missing in type '{}'."
1
2
3
4
5
6
7
8
9
10
11
12
13
14
接口可以帮助TypeScript在编译时捕获代码潜在问题，但有其还有更多重要特性：
接口仅用于编译时，编译后被即被删除，接口不会输出至最终的JavaScript代码中。
让我们通过接口来定义Response来完成本节：
interface Response {
status: number // Some HTTP status code, such as 200
}
fetch('https://test.com/foo/bar')
.then((response: Response) => {
console.log(response.status)
})
1
2
3
4
5
6
7
8
如果现在运行TypeScript编译器，不会有错误，当然环境中有fetch API，输出的JavaScript代码为：
fetch('https://test.com/foo/bar')
.then(function (response) {
console.log(response.status);
});
1
2
3
4
5
我们看到编译时定义的类型没有影响运行时程序，这就是TypeScript神奇的接口功能！
3. 类
现在我们重新使用类定义Response：
class Response {
status: number // Some HTTP status code, such as 200
}
fetch('https://test.com/foo/bar')
.then((response: Response) => {
console.log(response.status)
})
1
2
3
4
5
6
7
8
我们仅把interface改为class，这时TypeScript编译没有错误，保证了类型安全，实现效果一样。但真正不同的是编译后的JavaScript代码。与interface不同，class也是JavaScript的结构体，但其包括更多信息。最大的差异是类提供行为的实现，不仅仅是形状属性。
下面我们看TypeScript编译后的代码：
var Response = (function () {
function Response() {
}
return Response;
}());
fetch('https://test.com/foo/bar')
.then(function (response) {
console.log(response.status);
});
1
2
3
4
5
6
7
8
9
差异是类被编译成ES5函数形式，但我们并不需要这些代码。如果开发大型应用，使用重复使用这种模式声明类型，会导致应用中增加大量额外代码。
4. 总结
如果创建类型描述API的返回值，使用接口比较合适。与类不同，接口在编译后被完全删除，不会在JavaScript中增加不必要的代码。如果以后需要对接口的实现进行扩展，很容易将其转换成完整的类。
————————————————
随时随地看视频
