本文是对Typescript 中的 interface 和 type 到底有什么区别的阅读理解总结。

一、定义

1. interface : An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot.
2. type : An interface can have multiple merged declarations, but a type alias for an object type literal cannot.

二、相同点

1. 都可以描述一个对象或者一个函数
   interface

   1 2 3 4 5 6 7 8

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

   type

   1 2 3 4 5 6

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

2. 都允许扩展，其中type和interface可以互相扩展
   interface extends interface

   1 2 3 4 5 6

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

   type extends 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 extends interface

   1 2 3 4 5 6

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

三、不同点

type 可以而 interface 不行

1. 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]

2. 其他操作

   1 2 3 4 5 6 7

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

interface 可以而 type 不行
3. 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 
}
*/