這篇文章主要講解了“TypeScript中interface和type間的區(qū)別有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“TypeScript中interface和type間的區(qū)別有哪些”吧！

創(chuàng)新互聯(lián)長(zhǎng)期為上1000家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為薩嘎企業(yè)提供專(zhuān)業(yè)的網(wǎng)站制作、成都做網(wǎng)站，薩嘎網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

當(dāng)我們使用 TypeScript 時(shí)，就會(huì)用到 interface 和 type，平時(shí)感覺(jué)他們用法好像是一樣的，沒(méi)啥區(qū)別，都能很好的使用，所以也很少去真正的理解它們之間到底有啥區(qū)別。我們開(kāi)發(fā)過(guò)經(jīng)?；蜻@么來(lái)定義類(lèi)型：

interface Point {
    x: number;
    y: number;
}

或者這樣定義：

type Point = {
    x: number;
    y: number;
};

interface 和 type之間的差異不僅僅是次要語(yǔ)法聲明。那么，今天我們就來(lái)看看這兩家伙之間存在啥不可告人的秘密。

類(lèi)型和類(lèi)型別名

TypeScript 有 boolean、number、string 等基本類(lèi)型。如果我們想聲明高級(jí)類(lèi)型，我們就需要使用類(lèi)型別名。

類(lèi)型別名指的是為類(lèi)型創(chuàng)建新名稱(chēng)。需要注意的是，我們并沒(méi)有定義一個(gè)新類(lèi)型。使用type關(guān)鍵字可能會(huì)讓我們覺(jué)得是創(chuàng)建一個(gè)新類(lèi)型，但我們只是給一個(gè)類(lèi)型一個(gè)新名稱(chēng)。

所以我們所以 type 時(shí)，不是在創(chuàng)建新的類(lèi)別，而是定義類(lèi)型的一個(gè)別名而已。

接口

與 type相反，接口僅限于對(duì)象類(lèi)型。它們是描述對(duì)象及其屬性的一種方式。類(lèi)型別名聲明可用于任何基元類(lèi)型、聯(lián)合或交集。在這方面，接口被限制為對(duì)象類(lèi)型。

interface 和 type 的相似之處

在討論它們的區(qū)別之前，我們先來(lái)看看它們的相似之處。

兩者都可以被繼承

interface 和  type 都可以繼承。另一個(gè)值得注意的是，接口和類(lèi)型別名并不互斥。類(lèi)型別名可以繼承接口，反之亦然。

對(duì)于一個(gè)接口，繼承另一個(gè)接口

interface PartialPointX { x: number; }
interface Point extends PartialPointX { y: number; }

或者，繼承一個(gè)類(lèi)型

type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }

類(lèi)型繼承另一個(gè)類(lèi)型：

type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };

或者，繼承一個(gè)接口：

interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };

實(shí)現(xiàn)

類(lèi)可以實(shí)現(xiàn)接口以及類(lèi)型（TS 2.7+）。但是，類(lèi)不能實(shí)現(xiàn)聯(lián)合類(lèi)型。

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;
}

interface 和 type 的區(qū)別

并集和交集類(lèi)型

雖然接口可以被擴(kuò)展和合并，但它們不能以聯(lián)合和交集的形式組合在一起。類(lèi)型可以使用聯(lián)合和交集操作符來(lái)形成新的類(lèi)型。

// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };

// 并集
type PartialPoint = PartialPointX | PartialPointY;

// 交集
type PartialPoint = PartialPointX & PartialPointY;

聲明合并

TypeScript編譯器合并兩個(gè)或多個(gè)具有相同名稱(chēng)的接口。 這不適用于類(lèi)型。 如果我們嘗試創(chuàng)建具有相同名稱(chēng)但不同的屬性的兩種類(lèi)型，則TypeScript編譯器將拋出錯(cuò)誤。

// 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 };

元組類(lèi)型

元組(鍵值對(duì))只能通過(guò)type關(guān)鍵字進(jìn)行定義。

type Point = [x: number, y: number];

沒(méi)有辦法使用接口聲明元組。不過(guò)，我們可以在接口內(nèi)部使用元組

interface Point {
  coordinates: [number, number]
}

我們應(yīng)該使用哪一個(gè)？

一般來(lái)說(shuō)，接口和類(lèi)型都非常相似。

對(duì)于庫(kù)或第三方類(lèi)型定義中的公共API定義，應(yīng)使用接口來(lái)提供聲明合并功能。除此之外，我們喜歡用哪個(gè)就用哪個(gè)，但是在整個(gè)代碼庫(kù)中應(yīng)該要保持一致性。

感謝各位的閱讀，以上就是“TypeScript中interface和type間的區(qū)別有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)TypeScript中interface和type間的區(qū)別有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)頁(yè)名稱(chēng)：TypeScript中interface和type間的區(qū)別有哪些-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://vcdvsql.cn/article22/ddhhjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、品牌網(wǎng)站制作、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)