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

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

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

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

可以看到對(duì)于interface來(lái)說(shuō)，繼承是通過(guò)?extends?實(shí)現(xiàn)的，而type的話是通過(guò)?&?來(lái)實(shí)現(xiàn)的，也可以叫做?交叉類(lèi)型

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

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

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

接下來(lái)聊聊interface可以做到，但是type不可以做到的事情

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

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

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

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

結(jié)語(yǔ)

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

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

來(lái)自：Mr_Carl

https://juejin.cn/post/7059725643365220366

往期推薦

第一次拿全年年終獎(jiǎng)的前端女程序員的2021

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

45 個(gè) Git 經(jīng)典操作場(chǎng)景，專(zhuān)治不會(huì)合代碼

最后

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

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

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