Typescript 中的 interface 和 type 区别

interface VS type

在 typescript 中, 我们定义类型有两种方式： 接口(interface) 和类型别名(type alias)。官方规范 稍微说了下两者的区别：

• 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.

相同点

1. 都可以描述一个对象或者函数
2. 都允许拓展（extends）两者可以混合扩展，但是两者语法不同。
   interface extends interface (接口继承接口)
   type extends type (类型继承类型)
   interface extends type (接口继承类型)
   type extends interface (类型继承接口)

对象或函数
interface User {
  name: string
  age: number
}
 
interface SetUser {
  (name: string, age: number): void;
}

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

拓展
//interface extends interface
interface Name { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}
//type extends type
type Name = { 
  name: string; 
}
type User = Name & { age: number  };
//interface extends type
type Name = { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}
//type extends interface
interface Name { 
  name: string; 
}
type User = Name & { 
  age: number; 
}
不同点

不同点

1. type 可以声明基本类型别名，联合类型，元组等类型
2. type 语句中还可以使用 typeof 获取实例的 类型进行赋值
3. type其他一些扩展操作
4. interface 能够声明合并，type不行。

总结下简单实用的理解就是能用 interface 实现，就用 interface , 如果不能就用 type 。

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



//type 语句中还可以使用 typeof 获取实例的 类型进行赋值
// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div


// 其他骚操作
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 能够声明合并
interface User {
  name: string
  age: number
}
interface User {
  sex: string
}
 
/*
User 接口为 {
  name: string
  age: number
  sex: string 
}
*/