TS中interface和type的區別

一,概念:

1.接口(Interface)

接口主要用於類型檢查，它只是一個結構契約，定義了具有相似的名稱和類型的對象結構。除此之外，接口還可以定義方法和事件。

2.類型別名(Type Alias)

不同於interface只能定義對象類型，type聲明還可以定義基礎類型、聯合類型或交叉類型。

二,差異點:

1.定義類型范圍

interface只能定義對象類型, 而type聲明可以聲明任何類型，包括基礎類型、聯合類型或交叉類型。

// 基本類型 
type person = string

// 聯合類型
interface Dog {
 name: string;
}
interface Cat {
 age: number;
}
type animal = Dog | Cat

// 元組類型
interface Dog { 
name: string;
}
interface Cat { 
age: number;
}
type animal = [Dog, Cat]

2.擴展性

接口可以extends、implements,從而擴展多個接口或類。類型沒有擴展功能。

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

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

type可以使用交叉類型&，來使成員類型合並

// type & type
type Person = {
   name: string
}
type User = Person & { age: number }

// type & interface
interface Person {
  name: string
}
type User = {age: number} & Person

3.合並聲明

定義兩個相同名稱的接口會合並聲明。

定義兩個同名的type會出現異常。

interface Person { 
  name: string
}
interface Person {
  age: number
}
// 合並為:interface Person { name: string age: number} 

4.typeof

type可以使用typeof獲取實例類型

let div = document.createElement('div');
type B = typeof div