建站
咨詢
售后
建站咨詢
新聞中心
當(dāng)我們使用 TypeScript 時(shí)，就會(huì)用到 interface 和 type，平時(shí)感覺他們用法好像是一樣的，沒啥區(qū)別，都能很好的使用，所以也很少去真正的理解它們之間到底有啥區(qū)別。我們開發(fā)過經(jīng)常或這么來定義類型：
創(chuàng)新互聯(lián)是一家專業(yè)從事成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站的網(wǎng)絡(luò)公司。作為專業(yè)網(wǎng)站建設(shè)公司,創(chuàng)新互聯(lián)依托的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、成都營銷網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開發(fā)服務(wù)！
- interface Point {
- x: number;
- y: number;
當(dāng)我們使用 TypeScript 時(shí)，就會(huì)用到 `interface` 和 `type`，平時(shí)感覺他們用法好像是一樣的，沒啥區(qū)別，都能很好的使用，所以也很少去真正的理解它們之間到底有啥區(qū)別。我們開發(fā)過經(jīng)常或這么來定義類型：
- interface Point { x: number; y: number; }
或者這樣定義：
- type Point = { x: number; y: number; };
- `interface` 和 `type`之間的差異不僅僅是次要語法聲明。那么，今天我們就來看看這兩家伙之間存在啥不可告人的秘密。
- ### 類型和類型別名
- TypeScript 有 `boolean`、`number`、`string` 等基本類型。如果我們想聲明高級(jí)類型，我們就需要使用**類型別名**。
- 類型別名指的是為類型創(chuàng)建新名稱。**需要注意的是**，我們并沒有定義一個(gè)新類型。使用`type`關(guān)鍵字可能會(huì)讓我們覺得是創(chuàng)建一個(gè)新類型，但我們只是給一個(gè)類型一個(gè)新名稱。
- 所以我們所以 type 時(shí)，不是在創(chuàng)建新的類別，而是定義類型的一個(gè)別名而已。
- ### 接口
- 與 `type`相反，接口僅限于對(duì)象類型。它們是描述對(duì)象及其屬性的一種方式。類型別名聲明可用于任何基元類型、聯(lián)合或交集。**在這方面，接口被限制為對(duì)象類型**。
- ### interface 和 type 的相似之處
- 在討論它們的區(qū)別之前，我們先來看看它們的相似之處。
- }
或者這樣定義：
- type Point = {
- x: number;
- y: number;
- };
interface 和 type之間的差異不僅僅是次要語法聲明。那么，今天我們就來看看這兩家伙之間存在啥不可告人的秘密。
類型和類型別名
TypeScript 有 boolean、number、string 等基本類型。如果我們想聲明高級(jí)類型，我們就需要使用類型別名。
類型別名指的是為類型創(chuàng)建新名稱。需要注意的是，我們并沒有定義一個(gè)新類型。使用type關(guān)鍵字可能會(huì)讓我們覺得是創(chuàng)建一個(gè)新類型，但我們只是給一個(gè)類型一個(gè)新名稱。
所以我們所以 type 時(shí)，不是在創(chuàng)建新的類別，而是定義類型的一個(gè)別名而已。
接口
與 type相反，接口僅限于對(duì)象類型。它們是描述對(duì)象及其屬性的一種方式。類型別名聲明可用于任何基元類型、聯(lián)合或交集。在這方面，接口被限制為對(duì)象類型。
interface 和 type 的相似之處
在討論它們的區(qū)別之前，我們先來看看它們的相似之處。
兩者都可以被繼承
interface 和 type 都可以繼承。另一個(gè)值得注意的是，接口和類型別名并不互斥。類型別名可以繼承接口，反之亦然。
對(duì)于一個(gè)接口，繼承另一個(gè)接口
- interface PartialPointX { x: number; }
- interface Point extends PartialPointX { y: number; }
或者，繼承一個(gè)類型
- type PartialPointX = { x: number; };
- interface Point extends PartialPointX { y: number; }
類型繼承另一個(gè)類型：
- type PartialPointX = { x: number; };
- type Point = PartialPointX & { y: number; };
或者，繼承一個(gè)接口：
- interface PartialPointX { x: number; }
- type Point = PartialPointX & { y: number; };
實(shí)現(xiàn)
類可以實(shí)現(xiàn)接口以及類型(TS 2.7+)。但是，類不能實(shí)現(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;
- }
interface 和 type 的區(qū)別
并集和交集類型
雖然接口可以被擴(kuò)展和合并，但它們不能以聯(lián)合和交集的形式組合在一起。類型可以使用聯(lián)合和交集操作符來形成新的類型。
- // object
- type PartialPointX = { x: number; };
- type PartialPointY = { y: number; };
- // 并集
- type PartialPoint = PartialPointX | PartialPointY;
- // 交集
- type PartialPoint = PartialPointX & PartialPointY;
聲明合并
TypeScript編譯器合并兩個(gè)或多個(gè)具有相同名稱的接口。這不適用于類型。如果我們嘗試創(chuàng)建具有相同名稱但不同的屬性的兩種類型，則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 };
元組類型
元組(鍵值對(duì))只能通過type關(guān)鍵字進(jìn)行定義。
- type Point = [x: number, y: number];
沒有辦法使用接口聲明元組。不過，我們可以在接口內(nèi)部使用元組
- interface Point {
- coordinates: [number, number]
- }
我們應(yīng)該使用哪一個(gè)?
一般來說，接口和類型都非常相似。
對(duì)于庫或第三方類型定義中的公共API定義，應(yīng)使用接口來提供聲明合并功能。除此之外，我們喜歡用哪個(gè)就用哪個(gè)，但是在整個(gè)代碼庫中應(yīng)該要保持一致性。
~完，我是小智。
作者：SARANSH KATARIA
譯者：前端小智
來源：wisdomgeek
原文：https://www.wisdomgeek.com/development/web-development/typescript/typescript-the-difference-between-interface-and-type/
文章題目：使用TypeScript常見困惑：interface和type的區(qū)別是什么？
網(wǎng)址分享：http://m.5511xx.com/article/djdjjje.html
