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 
}
*/