TypeScript 中的類型與接口

Type vs. Interface是 TypeScript 中最令人困惑和有趣的事情之一。 我們將努力消除這種混亂。

TypeScript 是在 JavaScript 之上創建的，它添加了靜態類型。 擁有類型對開發人員來說是一件美妙的事情。 寫類型會很困難，但從長遠來看你不會後悔的。

TypeScript 具有所有基本類型，例如數字、字符串、布爾值等。除了基本類型，TypeScript 還允許我們創建自定義類型並在類型別名和接口的幫助下定義對象的外觀， 分別。

類型別名不過是類型。 創建具有自定義名稱（別名）的類型使其成為類型別名，僅此而已。

讓我們看一下Interfaces和Type Aliases的基本語法。

基本語法

接口

接口將使用interface關鍵字聲明。 檢查以下接口的語法。

 interface InterfaceName { keyName: typeOfKey ... }

看看下面的示例。

 interface Site { name: string; url: string; pagesCount: number; } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

類型別名

類型別名將使用type關鍵字聲明。 檢查下麵類型別名的語法。

 type TypeName = { keyName: typeOfKey; ... }

看看下面的示例。

 type Site = { name: string; url: string; pagesCount: number } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

我們使用接口和類型別名為Site創建了一個類型。 兩者都是有效的，可用於示例中提到的對像類型。 上面的例子只有語法不同，這是顯而易見的。

讓我們繼續探索它們之間的差異以找到更多的東西。

元組

TypeScript 中的元組是一個類型化的預定義長度數組。 它定義了每個索引的類型。

我們可以使用類型別名來聲明元組。 但是我們不能使用接口來做到這一點。 讓我們看看如何使用類型別名來做到這一點。

 type Site = [string, string, number] const geekflare: Site = ['Geekflare', 'https://geekflare.com/', 25]

在上面的示例中，我們為數組的每個索引元素定義了類型。 如果我們在數組中給出其他類型，TypeScript 會拋出錯誤。

我們不能用接口來做嗎？

我們不能完全像使用類型別名那樣做。 接口用於對像類型。 因此，我們需要在對象內部擁有元組才能在接口中使用它。 讓我們看一個例子。

 interface Site { details: [string, string]; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

如果你看到代碼，我們在接口中有一個名為details的元組。 因此，我們可以使用接口內部的元組。

同樣，我們可以為字符串、數字、布爾值等單一類型使用類型別名。由於接口用於對像類型，我們可以將其用於類型別名等單一類型。

另一個有趣的事情是我們可以在接口中使用類型別名元組。 檢查以下示例。

 type Details = [string, string] interface Site { details: Details; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

讓我們繼續下一件事。

聲明合併——接口

聲明合併是使用 TypeScript 合併具有相同名稱的接口類型。 讓我們看一下示例以更清楚地了解它。

 interface Site { name: string; } interface Site { url: string; } interface Site { pagesCount: number; } const geekflare: Site = { name: 'Geeflare', url: 'https://geekflare.com/', pagesCount: 25, }

如果你看到上面的代碼，我們已經聲明了 3 次同名的接口。 TypeScript 編譯器會將所有這 3 種形式編譯成一個對像類型，其中包括來自具有相同名稱的接口的所有類型。

您可以通過從geekflare對像中刪除一個鍵來確認聲明合併。 如果您從geekflare中刪除其中一個鍵，您將看到一個錯誤。

我們不能對類型別名做同樣的事情。 大多數人不使用該功能。 一般來說，擁有多個同名的接口是令人困惑的。

輸入別名粉絲，不用擔心接口的這個特性。

擴展

假設您已經聲明了一個類型。 現在，您想要聲明另一個類型以及前一個類型的類型。 在這種情況下，我們可以擴展以前的類型。 我們可以使用接口和類型別名來做到這一點。

讓我們看看他們倆。

接口

在 TypeScript 中有一個用於此用例的關鍵字extends 。 我們將使用它來擴展接口。 讓我們檢查一下這個例子。

 interface Site { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

我們通過擴展Site接口創建了Geekflare接口。 Geeflare界面中將顯示所有類型的Site以及它們自己的類型。 您可以從geekflare變量中刪除name鍵以確認它。

我們可以如下擴展多個接口。

 interface FirstHalf { name: string; } interface SecondHalf { age: number } interface Person extends FirstHalf, SecondHalf { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

嘗試使用超過 2 個接口進行擴展以獲得樂趣。 我們還可以使用接口擴展類型別名。

 type Site = { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

在上面的例子中，我們只擴展了一種類型。 您可以根據需要擴展任意數量，類似於前面擴展多個接口的示例。

讓我們看看如何使用類型別名來做到這一點。

類型別名

我們可以使用 TypeScript 中的交集類型來擴展類型別名。 讓我們看一個例子。

 type Site = { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

我們使用交集 (&) Geekflare founder擴展了Site類型。 您可以通過從geekflare變量中刪除其中一個鍵來測試它，這將引發錯誤。

與接口類似，我們可以擴展多種類型，如下所示。

 type FirstHalf = { name: string; } type SecondHalf = { age: number } type Person = FirstHalf & SecondHalf & { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

我們也可以使用類型別名來擴展接口，就像擴展類型別名的接口一樣。 檢查下面的示例。

 interface Site { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

嘗試擴展類型別名和接口的組合。

實施

這不是接口和類型別名之間的區別。 只是class的一個特性要知道。

一個類可以以相同的方式實現接口和類型別名。 讓我們看看他們兩個的例子。

接口

interface Site { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

類型別名

type Site = { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

注意：要記住的一件事是我們不能用類實現聯合 (|)或交集 (&)類型。

最後的話

正如您在文章中看到的那樣，我們可以使用類型別名和接口來做任何事情。 所以，我們不能嚴格地說一個比另一個好。 最後，選​​擇其中之一是個人的選擇。 你最終會發展出你使用它們的風格。

接下來，您可以查看 Typescript 與 Javascript。

快樂編碼