[[415498]]

本文轉(zhuǎn)載自微信公眾號(hào)「三分鐘學(xué)前端」，作者sisterAn。轉(zhuǎn)載本文請(qǐng)聯(lián)系三分鐘學(xué)前端公眾號(hào)。

接口 與 類型別名 的異同點(diǎn)

相同點(diǎn)

1. 都可以描述對(duì)象或函數(shù)

// 接口 
interface Sister { 
  name: string; 
  age: number; 
} 
 
interface SetSister { 
  (name: string, age: number): void; 
} 
 
// 類型別名 
type Sister = { 
  name: string; 
  age: number; 
}; 
 
type SetSister = (name: string, age: number) => void; 

2. 都可以擴(kuò)展

interface 和 type 可以混合擴(kuò)展，也就是說(shuō) interface 可以擴(kuò)展 type，type 也可以擴(kuò)展 interface。

但需要注意的是，接口的擴(kuò)展是繼承( extends )。類型別名的擴(kuò)展就是交叉類型(通過(guò) & 實(shí)現(xiàn))

// 接口 
interface SisterAn { 
    name: string; 
} 
 
// 類型別名 
type SisterRan = { 
    age: number; 
} 

// 接口擴(kuò)展接口 
interface Sister extends SisterAn { 
    age: number; 
} 

// 類型別名擴(kuò)展類型別名 
type SisterPro = SisterRan & { 
    name: string; 
} 

// 接口擴(kuò)展類型別名 
interface Sister extends SisterRan { 
    name: string; 
} 

// 類型別名擴(kuò)展接口 
type SisterPro = SisterAn & { 
    age: number; 
} 

區(qū)別

官方 中這樣介紹兩者的區(qū)別：

Type aliases and interfaces are very similar, and in many cases you can choose between them freely. Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.

意思就是說(shuō)幾乎接口的所有特性都可以通過(guò)類型別名來(lái)實(shí)現(xiàn)，主要區(qū)別在于：

1. 不同的聲明范圍

與接口不同，可以為任意的類型創(chuàng)建類型別名

類型別名的右邊可以是任何類型，包括基本類型、元祖、類型表達(dá)式( & 或 | 等);而在接口聲明中，右邊必須為變量結(jié)構(gòu)。例如，下面的類型別名就不能轉(zhuǎn)換成接口

type Name = string 
type Text = string | { text: string }; 
type Coordinates = [number, number]; 

2. 不同的擴(kuò)展形式

接口是通過(guò)繼承的方式來(lái)擴(kuò)展，類型別名是通過(guò) & 來(lái)擴(kuò)展

// 接口擴(kuò)展 
interface SisterAn { 
    name: string; 
} 
interface Sister extends SisterAn { 
    age: number; 
} 
 
// 類型別名擴(kuò)展 
type SisterRan = { 
    age: number; 
} 
type SisterPro = SisterRan & { 
    name: string; 
} 

這里需要注意的是，接口擴(kuò)展時(shí)，typescript 會(huì)檢查擴(kuò)展的接口是否可以賦值給被擴(kuò)展的接口

// 接口擴(kuò)展 
interface SisterAn { 
    name: string; 
    age: string 
} 
 
interface Sister extends SisterAn { 
    name: string; 
    age: number; 
} 
// 報(bào)錯(cuò)： 
//  Interface 'Sister' incorrectly extends interface 'SisterAn'. 
//  Types of property 'age' are incompatible. 
//  Type 'number' is not assignable to type 'string' 

但使用交集類型時(shí)就不會(huì)出現(xiàn)這種情況

// 類型別名擴(kuò)展 
type SisterRan = { 
 name: string; 
    age: string; 
} 
type SisterPro = SisterRan & { 
    name: string; 
    age: number; 
} 

類型別名擴(kuò)展時(shí)，typescript 將盡其所能把擴(kuò)展和被擴(kuò)展的類型組合在一起，而不會(huì)拋出編譯時(shí)錯(cuò)誤

3. 不同的重復(fù)定義表現(xiàn)形式

接口可以定義多次，多次的聲明會(huì)自動(dòng)合并

interface Sister { 
    name: string; 
} 
interface Sister { 
    age: number; 
} 
 
const sisterAn: Sister = { 
    name: 'sisterAn' 
}  
// 報(bào)錯(cuò)：Property 'age' is missing in type '{ name: string; }' but required in type 'Sister' 
 
const sisterRan: Sister = { 
    name: 'sisterRan',  
    age: 12 
} 
// 正確 

但是類型別名如果定義多次，會(huì)報(bào)錯(cuò)

type Sister = { // Duplicate identifier 'Sister' 
    name: string; 
} 
 
type Sister = { // Duplicate identifier 'Sister' 
    age: number; 
} 

如何選擇 Interface 、 Type

雖然 官方 中說(shuō)幾乎接口的所有特性都可以通過(guò)類型別名來(lái)實(shí)現(xiàn)，但建議優(yōu)先選擇接口，接口滿足不了再使用類型別名，在 typescript 官網(wǎng) Preferring Interfaces Over Intersections 有說(shuō)明，具體內(nèi)容如下：

大多數(shù)時(shí)候，對(duì)象類型的簡(jiǎn)單類型別名的作用與接口非常相似

interface Foo { prop: string } 
 
type Bar = { prop: string }; 

但是，一旦你需要組合兩個(gè)或多個(gè)類型來(lái)實(shí)現(xiàn)其他類型時(shí)，你就可以選擇使用接口擴(kuò)展這些類型，或者使用類型別名將它們交叉在一個(gè)中(交叉類型)，這就是差異開(kāi)始的時(shí)候。

接口創(chuàng)建一個(gè)單一的平面對(duì)象類型來(lái)檢測(cè)屬性沖突，這通常很重要! 而交叉類型只是遞歸的進(jìn)行屬性合并，在某種情況下可能產(chǎn)生 never 類型

接口也始終顯示得更好，而交叉類型做為其他交叉類型的一部分時(shí)，直觀上表現(xiàn)不出來(lái)，還是會(huì)認(rèn)為是不同基本類型的組合。

接口之間的類型關(guān)系會(huì)被緩存，而交叉類型會(huì)被看成組合起來(lái)的一個(gè)整體。

最后一個(gè)值得注意的區(qū)別是，在檢查到目標(biāo)類型之前會(huì)先檢查每一個(gè)組分。

出于這個(gè)原因，建議使用接口/擴(kuò)展擴(kuò)展類型而不是創(chuàng)建交叉類型。

- type Foo = Bar & Baz & { 
-     someProp: string; 
- } 
+ interface Foo extends Bar, Baz { 
+     someProp: string; 
+ } 

簡(jiǎn)單的說(shuō)，接口更加符合 JavaScript 對(duì)象的工作方式，簡(jiǎn)單的說(shuō)明下，當(dāng)出現(xiàn)屬性沖突時(shí)：

// 接口擴(kuò)展 
interface Sister { 
    sex: number; 
} 
 
interface SisterAn extends Sister { 
    sex: string; 
} 
// index.ts(5,11): error TS2430: Interface 'SisterAn' incorrectly extends interface 'Sister'. 
//  Types of property 'sex' are incompatible. 
//    Type 'string' is not assignable to type 'number'. 

// 交叉類型 
type Sister1 = { 
    sex: number; 
} 
 
type Sister2 = { 
    sex: string; 
} 
 
type SisterAn = Sister1 & Sister2; 
// 不報(bào)錯(cuò)，此時(shí)的 SisterAn 是一個(gè)'number & string'類型，也就是 never 

來(lái)源：https://github.com/Advanced-Frontend/Daily-Interview-Question