前言

在typescript里面，有兩個概念十分容易混淆，那便是 type 和 interface，它倆都可以用來表示 接口，但是實際使用上會存在一些差異，因此本篇文章就準備聊聊它倆，徹底弄清它倆的聯(lián)系與區(qū)別，廢話不多說，開搞！

type和interface的相同點

在我看來，它倆就是對 接口定義 的兩種不同形式，目的都是一樣的，都是用來定義 對象 或者 函數(shù) 的形狀，示例如下

    interface example {
        name: string
        age: number
    }
    interface exampleFunc {
        (name:string,age:number): void
    }
    
    
    type example = {
        name: string
        age: number
    }
    type example = (name:string,age:number) => void

它倆也支持 繼承，并且不是獨立的，而是可以 互相 繼承，只是具體的形式稍有差別

    type exampleType1 = {
        name: string
    }
    interface exampleInterface1 {
        name: string
    }
    
    
    type exampleType2 = exampleType1 & {
        age: number
    }
    type exampleType2 = exampleInterface1 & {
        age: number
    }
    interface exampleInterface2 extends exampleType1 {
        age: number
    }
    interface exampleInterface2 extends exampleInterface1 {
        age: number
    }

可以看到對于interface來說，繼承是通過 extends 實現(xiàn)的，而type的話是通過 & 來實現(xiàn)的，也可以叫做 交叉類型

type和interface的不同點

首先聊聊type可以做到，但interface不能做到的事情

• type可以定義 基本類型的別名，如 type myString = string
• type可以通過 typeof 操作符來定義，如 type myType = typeof someObj
• type可以申明 聯(lián)合類型，如 type unionType = myType1 | myType2
• type可以申明 元組類型，如 type yuanzu = [myType1, myType2]

接下來聊聊interface可以做到，但是type不可以做到的事情

• interface可以 聲明合并，示例如下

      interface test {
          name: string
      }
      interface test {
          age: number
      }
      
      /*
          test實際為 {
              name: string
              age: number
          }
      */

  這種情況下，如果是type的話，就會是 覆蓋 的效果，始終只有最后一個type生效

結(jié)語

其實在typescript里，還有很多容易搞混淆的概念，如 extends 和 implements 等，還有一些高級概念，如 泛型。這些都是在ts里必知必會的東西，因此一定要細摳這些知識點

ts給我們的代碼帶來健壯性的同時，也引入了更多的概念和知識，因此需要我們不斷地學習。在今后我也準備多輸出一些關于ts的文章，加深自己對于ts的理解，同時也可以幫助到喜歡看我文章的朋友，好啦，就寫到這里啦，over！

如何選擇 Interface 、 Type

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

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

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

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

• 接口創(chuàng)建一個單一的平面對象類型來檢測屬性沖突，這通常很重要！  而交叉類型只是遞歸的進行屬性合并，在某種情況下可能產(chǎn)生 never 類型
• 接口也始終顯示得更好，而交叉類型做為其他交叉類型的一部分時，直觀上表現(xiàn)不出來，還是會認為是不同基本類型的組合。
• 接口之間的類型關系會被緩存，而交叉類型會被看成組合起來的一個整體。
• 最后一個值得注意的區(qū)別是，在檢查到目標類型之前會先檢查每一個組分。

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

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

簡單的說，接口更加符合 JavaScript 對象的工作方式，簡單的說明下，當出現(xiàn)屬性沖突時：

// 接口擴展
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;
// 不報錯，此時的 SisterAn 是一個'number & string'類型，也就是 never

總結(jié)

到此這篇關于typescript中type和interface區(qū)別的文章就介紹到這了,更多相關typescript type和interface區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論