TypeScript中type和interface的區(qū)別及注意事項(xiàng)
前言
在 TS 中,type
和 interface
相似,都可以給類型命名并通過(guò)該名字來(lái)引用表示的類型。不過(guò)它們之間是存在一些差別的,我們?cè)谑褂脮r(shí)也需要注意一些特殊場(chǎng)景。
概念
type
type
關(guān)鍵字是聲明類型別名的關(guān)鍵字。它的語(yǔ)法如下:
type AliasName = Type;
- type:聲明類型別名的關(guān)鍵字
- AliasName:類型別名的名稱
- Type:類型別名關(guān)聯(lián)的具體類型
interface
通過(guò)關(guān)鍵字 interface
可以定義一個(gè)接口類型。它能合并眾多類型聲明至一個(gè)類型聲明。
接口聲明只存在于編譯階段,在編譯后生成的 JS 代碼中不包含任何接口代碼。
語(yǔ)法如下:
interface InterfaceName { TypeMember; TypeMember; ... }
- interface:定義接口的關(guān)鍵字
- InterfaceName:接口名,首字母需要大寫(xiě)
- TypeMember:接口的類型成員
異同點(diǎn)
不同點(diǎn)
- type 在聲明類型別名之后實(shí)際上是一個(gè)賦值操作,它需要將別名與類型關(guān)聯(lián)起來(lái)。也就是說(shuō)類型別名不會(huì)創(chuàng)建出一種新的類型,它只是給已有類型命名并直接進(jìn)行引用。interface是定義了一個(gè)接口類型。
- type 能夠表示非對(duì)象類型, 而 interface 則只能表示對(duì)象類型。
- interface可以繼承其他的接口、類等對(duì)象類型, type 不支持繼承。
好多文章里都說(shuō) type 也支持繼承,但是我認(rèn)為這種說(shuō)法不嚴(yán)謹(jǐn)。對(duì)于類型別名來(lái)說(shuō),它可以借助交叉類型來(lái)實(shí)現(xiàn)繼承的效果。而且這種方法也只適用于表示對(duì)象類型的類型別名,對(duì)于非對(duì)象類型是無(wú)法使用的。
type Shape = { name: string } type Circle = Shape & { radius: number } function foo(circle: Circle) { const name = circle.name const radius = circle.radius }
interface
接口名總是會(huì)直接顯示在編譯器的診斷信息和代碼編輯器的智能提示中,而 type 的名字只在特定情況下才會(huì)顯示出來(lái)——只有當(dāng)類型別名表示數(shù)組類型、元組類型以及類或者接口的泛型實(shí)例類型時(shí)才展示。
type NumericType = number | bigint; interface Circle { radius: number; } function f(value: NumericType, circle: Circle) { const bar: boolean = value; // ~~~ // Type 'number | bigint' is not assignable to type 'boolean' // 這里沒(méi)有顯示類型別名 const baz: boolean = circle; // ~~~ // Type 'Circle' is not assignable to type 'boolean' }
- interface具有聲明合并的行為,而 type不會(huì),這也意味著我們可以通過(guò)聲明合并的方式給 interface定義的類型進(jìn)行屬性擴(kuò)展。
- type可以通過(guò) typeof來(lái)獲取實(shí)例的類型從而進(jìn)行賦值操作
相同點(diǎn)
都可以用來(lái)定義 對(duì)象 或者 函數(shù) 的結(jié)構(gòu),而嚴(yán)謹(jǐn)?shù)膩?lái)說(shuō),type 是引用,而 interface是定義。
補(bǔ)充:Ts中type和interface定義類型擴(kuò)展類型的方法
1、在Ts中,我們可以通過(guò)type和interface的方式去定義類型,一般情況下通過(guò)interface接口的方法定義的類型都可以通過(guò)type去定義。注意type要添加等號(hào)。Interface定義類型不需要添加等號(hào)。
下面代碼是用type聲明一個(gè)string類型的例子
type user=string //接收一個(gè)字符串類型的數(shù)據(jù),返回一個(gè)user類型(字符串類型)的數(shù)據(jù) function Input(str:string):user{ return str.slice(0,2) } //把返回結(jié)果賦值給userInput let userInput=Input('hello') //重新給其賦值一個(gè)字符串類型的值,沒(méi)有報(bào)錯(cuò),說(shuō)明用type聲明的字符串類型生效 userInput='new'
下面代碼是用interface聲明一個(gè)對(duì)象類型的例子
interface Point{ x:number, y:number } //接收一個(gè)Point的對(duì)象類型數(shù)據(jù) function printCoord(pt:Point){ } //給函數(shù)傳一個(gè)對(duì)象類型的數(shù)據(jù),沒(méi)有報(bào)錯(cuò),說(shuō)明用interface聲明的類型生效 printCoord({ x:100, y:100 })
2、 Interface擴(kuò)展接口:可以在interface后面添加關(guān)鍵字extends去擴(kuò)展接口。類型別名type需要使用&符號(hào)去擴(kuò)展接口
下面代碼是用extends擴(kuò)展接口的例子
//擴(kuò)展接口 interface Animal{ name:string } interface Bear extends Animal{ honey:boolean } //聲明一個(gè)類型為Bear類型的對(duì)象,要求既要有name,也要有honey。說(shuō)明用extends擴(kuò)展接口成功 const bear:Bear={ name:'winie', honey:true } console.log(bear.name); console.log(bear.honey);
下面代碼是用type擴(kuò)展接口的例子
//擴(kuò)展類型 type Animal={ name:string } //給Animal擴(kuò)展接口 type Bear=Animal&{ honey:boolean } const bear:Bear={ name:'winie', honey:true }
3、向現(xiàn)有類型添加新字段,interface可以通過(guò)定義同名的方式去擴(kuò)展字段,類型別名type是不能通過(guò)同名的方式去進(jìn)行擴(kuò)展的。
下面代碼是interface通過(guò)定義同名的方式向現(xiàn)有類型添加新字段
//向現(xiàn)有的類型添加新字段 interface MyWindow{ title:string } interface MyWindow{ count:number } const w:MyWindow={ title:'wz', count:666 }
下面代碼會(huì)報(bào)錯(cuò),因?yàn)轭愋蛣e名type是不能通過(guò)同名的方式去進(jìn)行擴(kuò)展的。
//類型創(chuàng)建后不能更改 type MyWindow={ title:string } type MyWindow={ }
總結(jié)
對(duì)于 type來(lái)說(shuō),更多的是對(duì)類型的一種復(fù)用,比如在項(xiàng)目中需要用到一些比較復(fù)雜的或者書(shū)寫(xiě)起來(lái)很長(zhǎng)的類型。我們可以使用 type來(lái)直接引用該類型:
type FType = boolean | string | number;
而對(duì)于 interface
來(lái)說(shuō),它是正兒八經(jīng)的用來(lái)定義接口類型(約束數(shù)類型和屬性)的,且接口類型是支持繼承和聲明合并的。
所以在對(duì)于對(duì)象結(jié)構(gòu)的類型定義上,建議盡可能的使用 interface
,而在合適的場(chǎng)景使用 type
。
到此這篇關(guān)于TypeScript中type和interface區(qū)別及注意事項(xiàng)的文章就介紹到這了,更多相關(guān)TS type和interface區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Typescript 中的 interface 和 type 到底有什么區(qū)別詳解
- 詳解TypeScript中type與interface的區(qū)別
- typeScript?核心基礎(chǔ)之接口interface
- TypeScript中正確使用interface和type的方法實(shí)例
- typescript中type和interface的區(qū)別有哪些
- Typescript中interface自動(dòng)化生成API文檔詳解
- TypeScript定義接口(interface)案例教程
- Typescript中 type 與 interface 的區(qū)別說(shuō)明總結(jié)
相關(guān)文章
js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的五種方法推薦
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的五種方法推薦。小編覺(jué)得挺不錯(cuò)的?,F(xiàn)在分享給大家。給大家參考一下。2016-03-03原生JavaScript實(shí)現(xiàn)合并多個(gè)數(shù)組示例
這篇文章主要介紹了原生的JavaScript及jquery實(shí)現(xiàn)合并多個(gè)數(shù)組,很簡(jiǎn)單,很實(shí)用,大家可以看看2014-09-09解析javascript圖片懶加載與預(yù)加載的分析總結(jié)
本篇文章介紹了javascript圖片懶加載與預(yù)加載的分析,詳細(xì)的介紹了懶加載和預(yù)加載的問(wèn)題,有需要的可以了解一下。2016-10-10Echarts圖表分析巴西隊(duì)歷年戰(zhàn)績(jī)實(shí)例詳解
這篇文章主要為大家介紹了Echarts圖表分析巴西隊(duì)歷年戰(zhàn)績(jī)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12Javascript+CSS3實(shí)現(xiàn)進(jìn)度條效果
本篇文章主要介紹Javascript+CSS3實(shí)現(xiàn)進(jìn)度條效果,可以實(shí)現(xiàn)給用戶一個(gè)等待的過(guò)程,有需要的可以了解一下。2016-10-10