type和interface的區(qū)別知多少？

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

type和interface的相同點(diǎn)

在我看來，它倆就是對?接口定義?的兩種不同形式，目的都是一樣的，都是用來定義?對象?或者?函數(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
復(fù)制代碼

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

????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
????}
復(fù)制代碼

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

type和interface的不同點(diǎn)

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

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

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

1. interface可以?聲明合并，示例如下

????interface?test?{
????????name:?string
????}
????interface?test?{
????????age:?number
????}
????
????/*
????????test實(shí)際為?{
????????????name:?string
????????????age:?number
????????}
????*/
????復(fù)制代碼

這種情況下，如果是type的話，就會報(bào)?重復(fù)定義?的警告，因此是無法實(shí)現(xiàn)?聲明合并?的

這里特別感謝?酒薄不堪飲[1]?這位掘友，指出了此處之前存在的錯(cuò)誤說法

結(jié)語

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

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

來自：Mr_Carl

https://juejin.cn/post/7059725643365220366

往期推薦

第一次拿全年年終獎的前端女程序員的2021

【前端初/中級面經(jīng)】中小型公司面試時(shí)都會問些什么，VUE出境最高?

45 個(gè) Git 經(jīng)典操作場景，專治不會合代碼

最后

• 歡迎加我微信，拉你進(jìn)技術(shù)群，長期交流學(xué)習(xí)...
  

• 歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...

點(diǎn)個(gè)在看支持我吧