可能对于许多初学者来说，经常容易陷入一个纠结的境遇当中，我到底应该怎么在type和interface这两者之间做出抉择，对于百度上的各个文章的众说纷纭，我们总需要翻阅许多文章或许才能找寻到相对合理的解释，那么他们之间的爱恨情仇到底如何来分析才能更加生动易于理解呢。

相同点

二者皆可用于描述对象和函数类型，约束或注解特定的参数或属性，但从实现上来看，两者语法存在一定的差异。

interface

描述对象

interface Person {
    name: string;
    age: number;
    getUserInfo: (name: string, age: number) => string 
}

const tom:Person = { name: 'tom', age: 12, getUserInfo(name, age) { return name + age } };

描述函数

interface initPerson {
    (name: string, age: number): object
}

let getNewPerson: initPerson;

getNewPerson = function(name, age) {
    return { name, age }
}

type

描述对象

type User = {
    name: string;
    age: number;
    getUserInfo: (name: string, age: number) => string 
}

const jack:User = { name: 'jack', age: 10, getUserInfo(name, age) { return name + age } };

描述函数

type initUser = (name: string, age: number) => object;

let getNewUser: initUser;

getNewUser = function(name: string, age: number) {
    return { name, age }
}

拓展方式

实现的效果差不多，具体实现方式存在差异，所以这里还是区分一下吧

interface

interface Person {
    name: string;
    age: number;
}

interface Man extends Person {
    sex: number
}

const realMan: Man = { 
    name: 'Tom',
    age: 42,
    sex: 1
}

一旦继承一个接口，那么被继承的接口具备的属性也将被合并进来。在规范对象或函数的形状的时候，就需要满足合并后的接口规范。

不仅如此，这里还需要考虑一个问题，如果想要继承一个接口，那么属性必须相互兼容。

type

type User = {
    name: string;
    age: number;
}

type mergeType = User &  {sex: number }

const realMan: mergeType = { 
    name: 'Tom',
    age: 42,
    sex: 1
}

在具体规范变量形状上来说，两者实现的效果还是差不多的。

是否可以进行相互拓展呢？

答案是肯定的，在拓展方式上还是一样的。

interface Person {
    name: string;
    age: number;
}

type User =  {
    sex: number;
}

type typeMerge = User & Person;

interface interfaceMerge extends User {};

不同点

interface

相较于type而言，interface比较明显的优点就在于，interface能进行声明合并:

interface Person1 {
    name: string;
}

interface Person1 {
    sex: number;
}

这上面两句声明将会合并成一个，实现的效果就可以等同于下面的代码:

interface Person2 {
    name: string;
    sex: number
}

type

对于type方式来说，他具备的能力就比较多了:

• 基本类型别名
• 联合类型
• 元组类型
• 使用typeof动态获取类型并进行赋值

上述都是列出来的都是interface不具备的能力，不仅如此，type还可以用于进行一些复杂的类型定义。

type Foo = number | string;
type Foo1 = [string, number];

const str = 112;
type Foo2 = typeof str;

type Coordinates = Pair<number>;  
type Tree<T> = T | { left: Tree<T>, right: Tree<T> };

总结

就整个对比来说，type能做的事情似乎比interface要多，但是从官方推荐来看，尽量还是能用interface来实现的就尽量用interface吧。

如果还存在其他疑问的，可以翻阅官方文档进行查看。