|
官方文档中有关于两者对比的信息，隐藏在 TypeScript Handbook 中，见 Interfaces vs. Type Aliases 部分。
但因为这一部分很久没更新了，所以其中描述的内容不一定全对。
比如，
区别点之一：Type Alias 不会创建新的类型，体现在错误信息上。
One difference is, that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name.
不完全正确。直接通过 type 定义的初始类型，是会创建相应的类型名称的。
什么意思呢。就是说，不是使用 &, | 等操作符创建的 union type 及 intersection type。
type Person = {
name: string;
age: number;
};
// [x] Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.ts(2741)
const bob: Person = {
name: "bob"
}; 注意这里错误信息使用的是类型 Person 而不是对应的 plain object 对象。
区别点之二：type alias 不能被 extends 和 implements。
实际上在扩展和实现上二者已经没有区别，甚至可以混用，比如让一个 class 同时实现 interface 和 type alias 定义的类型。
type PointType = {
x: number;
y: number;
};
interface PointInterface {
a: number;
b: number;
}
class Shape implements PointType, PointInterface {
constructor(public a = 1, public b = 2, public x = 3, public y = 4) {}
} 区别点之三：type alias 不能扩展和实现其他类型
不完全正确。因为通过正交操作符（intersection type） & 可以达到 extends 的目的。
interface Person {
name: string;
}
interface Job {
title: string;
}
type EmployeeType = Person & Job;
class Employee implements EmployeeType {
constructor(public name = "Nobody", public title = "Noone") {}
} 上面可以看到，两者大部分情况下不用过多区分。
在使用了 union type 的时候，一些区别才开始显现。其实也算不得区别，因为只有 type alias 可通过 union type 定义。
当 type 包含 union type 时，该类型是不能被实现和扩展的。
interface Triangle {
area: number;
}
interface Square {
width: number;
height: number;
}
type ShapeType = Triangle | Square;
// [x] An interface can only extend an object type or intersection of object types with statically known members.ts(2312)
interface MyShape extends ShapeType;
class Shape implements ShapeType{
// [x] A class can only implement an object type or intersection of object types with statically known members.ts(2422)
} 因为 union type 描述的是一个或者的状态，一个类不可能即是此类型也是另外种类型。interface 也不可能继承一个类型还不确定的类型。
类型合并
最明显的一点区别，是在进行类型合并（Declaration Merging）的时候，type alias 是不会被合并的，而同名的多个 interface 会合并成一个。
interface Person {
name: string;
}
interface Person {
age: number;
}
const person: Person = {
name: "Bob",
age: 9
}; 对于 type alias，存在同名时直接报错。
type Person { // [x] Duplicate identifier 'Person'.ts(2300)
name: string;
}
type Person { // [x] Duplicate identifier 'Person'.ts(2300)
age: number;
}明白这点对于三方库的作者来说很重要。假如你写了个 npm 包，导出的是 type，则使用者无法通过简单定义同名类型来进行扩充。
所以，写库的时候，尽量使用 interface。
结论
官方推荐用 interface，其他无法满足需求的情况下用 type alias。
但其实，因为 union type 和 intersection type 是很常用的，所以避免不了大量使用 type alias 的场景，一些复杂类型也需要通过组装后形成 type alias 来使用。所以，如果想保持代码统一，可尽量选择使用 type alias。通过上面的对比，type alias 其实可函盖 interface 的大部分场景。
对于 React 组件中 props 及 state，使用 type alias，这样能够保证使用组件的地方不能随意在上面添加属性。如果有自定义需求，可通过 HOC （Higher-Order Components）二次封装。
编写三方库时使用 interface，其更加灵活自动的类型合并可应对未知的复杂使用场景。
相关资料
|