interface Vs type

interface VS type

原文

相同点

都可以描述一个对象或函数

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

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

拓展(extends)与交叉类型(Intersection Types)

interface 可以extends，但type是不允许extends和implement的，但是type却可以通过交叉类型实现interface的extends行为，并且两者并不是相互独立的，也就是说interface可以extends type，type也可以与interface类型交叉。

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

// type 与type交叉
type Name = {
  name: string
}
type User = Name & { age: number }

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

//type 与 interface 交叉
interface Name {
  name: string
}
type User = Name & {
  age: number
}

不同点

type可以而interface不行

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

// 基本类型别名
type Name = string

// 联合类型
interface Dog {
  wong()
}
interface Cat {
  miao()
}
type Pet = Dog | Cat

//具体定义数组每个位置的类型
type PetList = [Dog, Peg]

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