Interface 与 Type的区别

Interface 与Type

在使用typescript的时候经常会使用到interface与type。对于这两者区别在官方文档中说明了两者区别

• An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot.
  (接口可以在扩展或实现子句中命名，但对象类型文字的类型别名不能)
• An interface can have multiple merged declarations, but a type alias for an object type literal cannot.(一个接口可以有多个合并的声明，但对象类型文字的类型别名不能。)

相同点

简单一句话： 都可以描述一个对象或者函数

interface

1
2
3
4
5
6
7
8

interface person {
  name: string
  age: number
}

interface setperson {
  (name: string, age: number): void;
}

type

1
2
3
4
5
6
7

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

type setperson = (name: string, age: number)=> void;

都允许拓展（extends）与 交叉类型（Intersection Types）

interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。interface 可以 extends， 但 type 是不允许 extends 和 implement 的，但是 type 却可以通过交叉类型 实现 interface 的 extend 行为，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 与 interface 类型 交叉 。 虽然效果差不多，但是两者语法不同。

interface extends interface

interface 继承使用关键字 extends

1
2
3
4
5
6

interface Name { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}

type 与 type 交叉

type 继承使用符号&

1
2
3
4

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

interface extends type

1
2
3
4
5
6

type Name = { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}

type 与 interface 交叉

1
2
3
4
5
6

interface Name { 
  name: string; 
}
type User = Name & { 
  age: number; 
}

不同点

type 可以而 interface 不行

• type 可以声明基本类型别名，联合类型，元组等类型
  

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  // 基本类型别名 type Name = string // 联合类型 interface Dog { wong(); } interface Cat { miao(); } type Pet = Dog | Cat // 具体定义数组每个位置的类型 type PetList = [Dog, Pet]

• type 语句中还可以使用 typeof 获取实例的 类型进行赋值
  

  1 2 3

  // 当你想获取一个变量的类型时，使用 typeof let div = document.createElement('div'); type B = typeof div

• 其他骚操作

  1 2 3 4 5 6 7

  type StringOrNumber = string | number; type Text = string | { text: string }; type NameLookup = Dictionary<string, Person>; type Callback<T> = (data: T) => void; type Pair<T> = [T, T]; type Coordinates = Pair<number>; type Tree<T> = T | { left: Tree<T>, right: Tree<T> };

interface 可以而 type 不行

interface 能够声明合并

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

interface User {
  name: string
  age: number
}

interface User {
  sex: string
}

/*
User 接口为 {
  name: string
  age: number
  sex: string 
}
*/

总结

一般来说，如果不清楚什么时候用interface/type，能用 interface 实现，就用 interface , 如果不能就用 type 。其他更多详情参看官方规范文档