這篇文章主要講解了“TypeScript中interface和type間的區(qū)別有哪些”,文中的講解內(nèi)容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“TypeScript中interface和type間的區(qū)別有哪些”吧!
創(chuàng)新互聯(lián)長期為上1000家客戶提供的網(wǎng)站建設服務,團隊從業(yè)經(jīng)驗10年,關注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務;打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為薩嘎企業(yè)提供專業(yè)的網(wǎng)站制作、成都做網(wǎng)站,薩嘎網(wǎng)站改版等技術服務。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。當我們使用 TypeScript 時,就會用到 interface
和 type
,平時感覺他們用法好像是一樣的,沒啥區(qū)別,都能很好的使用,所以也很少去真正的理解它們之間到底有啥區(qū)別。我們開發(fā)過經(jīng)?;蜻@么來定義類型:
interface Point { x: number; y: number; }
或者這樣定義:
type Point = { x: number; y: number; };
interface
和 type
之間的差異不僅僅是次要語法聲明。那么,今天我們就來看看這兩家伙之間存在啥不可告人的秘密。
TypeScript 有 boolean
、number
、string
等基本類型。如果我們想聲明高級類型,我們就需要使用類型別名。
類型別名指的是為類型創(chuàng)建新名稱。需要注意的是,我們并沒有定義一個新類型。使用type
關鍵字可能會讓我們覺得是創(chuàng)建一個新類型,但我們只是給一個類型一個新名稱。
所以我們所以 type 時,不是在創(chuàng)建新的類別,而是定義類型的一個別名而已。
與 type
相反,接口僅限于對象類型。它們是描述對象及其屬性的一種方式。類型別名聲明可用于任何基元類型、聯(lián)合或交集。在這方面,接口被限制為對象類型。
在討論它們的區(qū)別之前,我們先來看看它們的相似之處。
interface 和 type 都可以繼承。另一個值得注意的是,接口和類型別名并不互斥。類型別名可以繼承接口,反之亦然。
對于一個接口,繼承另一個接口
interface PartialPointX { x: number; } interface Point extends PartialPointX { y: number; }
或者,繼承一個類型
type PartialPointX = { x: number; }; interface Point extends PartialPointX { y: number; }
類型繼承另一個類型:
type PartialPointX = { x: number; }; type Point = PartialPointX & { y: number; };
或者,繼承一個接口:
interface PartialPointX { x: number; } type Point = PartialPointX & { y: number; };
類可以實現(xiàn)接口以及類型(TS 2.7+)。但是,類不能實現(xiàn)聯(lián)合類型。
interface Point { x: number; y: number; } class SomePoint implements Point { x = 1; y = 2; } type AnotherPoint = { x: number; y: number; }; class SomePoint2 implements AnotherPoint { x = 1; y = 2; } type PartialPoint = { x: number; } | { y: number; }; // Following will throw an error class SomePartialPoint implements PartialPoint { x = 1; y = 2; }
雖然接口可以被擴展和合并,但它們不能以聯(lián)合和交集的形式組合在一起。類型可以使用聯(lián)合和交集操作符來形成新的類型。
// object type PartialPointX = { x: number; }; type PartialPointY = { y: number; }; // 并集 type PartialPoint = PartialPointX | PartialPointY; // 交集 type PartialPoint = PartialPointX & PartialPointY;
TypeScript編譯器合并兩個或多個具有相同名稱的接口。 這不適用于類型。 如果我們嘗試創(chuàng)建具有相同名稱但不同的屬性的兩種類型,則TypeScript編譯器將拋出錯誤。
// These two declarations become: // interface Point { x: number; y: number; } interface Point { x: number; } interface Point { y: number; } const point: Point = { x: 1, y: 2 };
元組(鍵值對)只能通過type
關鍵字進行定義。
type Point = [x: number, y: number];
沒有辦法使用接口聲明元組。不過,我們可以在接口內(nèi)部使用元組
interface Point { coordinates: [number, number] }
一般來說,接口和類型都非常相似。
對于庫或第三方類型定義中的公共API定義,應使用接口來提供聲明合并功能。除此之外,我們喜歡用哪個就用哪個,但是在整個代碼庫中應該要保持一致性。
感謝各位的閱讀,以上就是“TypeScript中interface和type間的區(qū)別有哪些”的內(nèi)容了,經(jīng)過本文的學習后,相信大家對TypeScript中interface和type間的區(qū)別有哪些這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關知識點的文章,歡迎關注!
網(wǎng)頁名稱:TypeScript中interface和type間的區(qū)別有哪些-創(chuàng)新互聯(lián)
URL網(wǎng)址:http://muchs.cn/article22/ddhhjc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站導航、品牌網(wǎng)站制作、全網(wǎng)營銷推廣、網(wǎng)站維護、網(wǎng)站設計、面包屑導航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容