type 和 interface 的區別（type和interface的區別知多少）

2023-04-17 19:27:47

type 和 interface 的區別?在typescript裡面，有兩個概念十分容易混淆，那便是 type 和 interface，它倆都可以用來表示接口，但是實際使用上會存在一些差異，因此本篇文章就準備聊聊它倆，徹底弄清它倆的聯繫與區別，廢話不多說，開搞，下面我們就來說一說關於type 和 interface 的區別?我們一起去了解並探討一下這個問題吧!

type 和 interface 的區別

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

type和interface的相同點

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

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 實現的，而type的話是通過 & 來實現的，也可以叫做 交叉類型

type和interface的不同點

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

type可以定義 基本類型的別名，如 type myString = stringtype可以通過 typeof 操作符來定義，如 type myType = typeof someObjtype可以申明 聯合類型，如 type unionType = myType1 | myType2type可以申明 元組類型，如 type yuanzu = [myType1, myType2]

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

interface可以 聲明合併，示例如下

interface test { name: string } interface test { age: number } /* test實際為 { name: string age: number } */ 複製代碼

這種情況下，如果是type的話，就會報 重複定義 的警告，因此是無法實現 聲明合併 的

這裡特別感謝 酒薄不堪飲[1] 這位掘友，指出了此處之前存在的錯誤說法
結語
其實在typescript裡，還有很多容易搞混淆的概念，如 extends 和 implements 等，還有一些高級概念，如泛型。這些都是在ts裡必知必會的東西，因此一定要細摳這些知識點
ts給我們的代碼帶來健壯性的同時，也引入了更多的概念和知識，因此需要我們不斷地學習。在今後我也準備多輸出一些關於ts的文章，加深自己對於ts的理解，同時也可以幫助到喜歡看我文章的朋友，好啦，就寫到這裡啦，over！
,