Typ vs. Schnittstelle in TypeScript

Type vs. Interface ist eines der verwirrendsten und interessantesten Dinge in TypeScript. Wir werden versuchen, diese Verwirrung aufzuklären.

TypeScript wird über JavaScript erstellt, wodurch statische Typen hinzugefügt werden . Typen zu haben ist eine wunderbare Sache für Entwickler. Das Schreiben von Typen wird schwierig sein, aber Sie werden es auf lange Sicht nicht bereuen.

TypeScript hat alle Grundtypen wie Zahl, Zeichenfolge, Boolean usw. Neben dem Grundtyp ermöglicht uns TypeScript, benutzerdefinierte Typen zu erstellen und zu definieren, wie ein Objekt mit Hilfe von Typaliasen und Schnittstellen aussieht. beziehungsweise.

Ein Typ-Alias ​​ist nichts anderes als ein Typ. Das Erstellen eines Typs mit einem benutzerdefinierten Namen (Alias) macht ihn zu einem Typ-Alias, nicht mehr als das.

Schauen wir uns die grundlegende Syntax von Interfaces und Type Aliases an.

Grundlegende Syntax

Schnittstellen

Schnittstellen werden mit dem Schlüsselwort interface deklariert. Überprüfen Sie die Syntax der folgenden Schnittstellen.

 interface InterfaceName { keyName: typeOfKey ... }

Schauen Sie sich das Beispielbeispiel unten an.

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

Geben Sie Aliasse ein

Typaliase werden mit dem Schlüsselwort type deklariert. Überprüfen Sie die Syntax der Typenaliase unten.

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

Schauen Sie sich das Beispielbeispiel unten an.

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

Wir haben einen Typ für die Site unter Verwendung der Schnittstelle und des Typalias erstellt. Beide sind gültig und können für die in den Beispielen genannten Objekttypen verwendet werden. Nur die Syntax ist im obigen Beispiel anders, was offensichtlich ist.

Lassen Sie uns weiter die Unterschiede zwischen ihnen untersuchen, um mehr Dinge zu finden.

Tupel

Ein Tupel in TypeScript ist ein typisiertes Array mit vordefinierter Länge. Es definiert die Typen jedes Indexes.

Wir können Tupel mit Typaliasen deklarieren. Aber wir können das nicht über Schnittstellen machen. Mal sehen, wie man das mit Typ-Aliassen macht.

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

Im obigen Beispiel haben wir den Typ für jedes Indexelement für das Array definiert. Wenn wir einen anderen Typ im Array angeben, gibt TypeScript einen Fehler aus.

Können wir das nicht mit Schnittstellen machen?

Wir können es nicht genau so machen, wie wir es mit Typ-Aliassen machen. Schnittstellen werden für Objekttypen verwendet. Wir müssen also das Tupel innerhalb des Objekts haben, um es in Schnittstellen verwenden zu können. Sehen wir uns ein Beispiel an.

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

Wenn Sie den Code sehen, haben wir ein Tupel namens details in der Schnittstelle. Wir können also die Tupel innerhalb der Schnittstellen verwenden.

Ebenso können wir Typaliase für einzelne Typen wie String, Zahl, Boolean usw. verwenden. Da die Schnittstelle für die Objekttypen verwendet wird, können wir sie für die einzelnen Typen wie Typaliase verwenden.

Eine weitere interessante Sache ist, dass wir das Typ-Alias-Tupel in den Schnittstellen verwenden können . Überprüfen Sie das folgende Beispiel.

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

Kommen wir zum nächsten.

Deklarationszusammenführung – Schnittstellen

Beim Zusammenführen von Deklarationen wird TypeScript verwendet, um Typen von Schnittstellen mit demselben Namen zusammenzuführen. Sehen wir uns das Beispiel an, um mehr Klarheit zu bekommen.

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

Wenn Sie den obigen Code sehen, haben wir die Schnittstelle dreimal mit demselben Namen deklariert. Der TypeScript-Compiler kompiliert alle diese 3 Formulare zu einem einzigen Objekttyp, der alle Typen der gleichnamigen Schnittstellen enthält.

Sie können die Zusammenführung der Deklaration bestätigen, indem Sie einen Schlüssel aus dem geekflare Objekt entfernen. Wenn Sie einen der Schlüssel von geekflare , wird ein Fehler angezeigt.

Dasselbe können wir mit Typaliasen nicht machen. Die meisten Leute nutzen diese Funktion nicht. Im Allgemeinen ist es verwirrend, mehrere Schnittstellen mit demselben Namen zu haben.

Geben Sie Alias-Fans ein, machen Sie sich keine Sorgen über diese Funktion von Schnittstellen .

Erweitert

Angenommen, Sie haben einen Typ deklariert. Jetzt möchten Sie einen weiteren Typ zusammen mit den Typen des vorherigen Typs deklarieren. In diesem Fall können wir den vorherigen Typ erweitern. Wir können dies sowohl mit Schnittstellen als auch mit Typaliasen tun.

Sehen wir uns beide an.

Schnittstellen

Für diesen Anwendungsfall gibt es in TypeScript ein Schlüsselwort namens extends . Wir werden es verwenden, um die Schnittstellen zu erweitern. Sehen wir uns das Beispiel an.

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

Wir haben die Geekflare Schnittstelle erstellt, indem wir die Site -Schnittstelle erweitert haben. Alle Site -Typen werden zusammen mit ihren eigenen Typen in der Geeflare -Oberfläche vorhanden sein. Sie können den name aus der geekflare Variable entfernen, um dies zu bestätigen.

Wir können mehrere Schnittstellen wie folgt erweitern.

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

Versuchen Sie zum Spaß, mit mehr als 2 Schnittstellen zu erweitern. Wir können Typaliase auch mit dem Interface erweitern.

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

Wir haben im obigen Beispiel nur einen Typ erweitert. Sie können beliebig viele erweitern, ähnlich wie im vorherigen Beispiel zum Erweitern mehrerer Schnittstellen.

Mal sehen, wie man das mit Typ-Aliassen macht.

Geben Sie Aliasse ein

Wir können die Typaliase mithilfe des Schnittpunkttyps in TypeScript erweitern. Sehen wir uns ein Beispiel an.

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

Wir haben den Site -Typ mit dem founder für den Geekflare -Typ erweitert, indem wir die Schnittmenge (&) verwendet haben. Sie können es testen, indem Sie einen der Schlüssel aus der Variable geekflare , was einen Fehler auslöst.

Ähnlich wie bei Schnittstellen können wir mehrere Typen wie folgt erweitern.

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

Wir können auch Schnittstellen mit Typaliasen erweitern, genauso wie Schnittstellen, die Typaliase erweitern. Überprüfen Sie das Beispiel unten.

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

Versuchen Sie, die Kombination aus Typaliasen und Schnittstellen zu erweitern.

Implementieren

Dies ist kein Unterschied zwischen Schnittstellen und Typaliasen. Nur ein Merkmal der class zu wissen.

Eine Klasse kann sowohl Interface- als auch Type-Alias ​​auf die gleiche Weise implementieren. Sehen wir uns die Beispiele für beide an.

Schnittstellen

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

Geben Sie Aliasse ein

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

Hinweis: Beachten Sie , dass wir keine Vereinigungs- (|) oder Schnittmengentypen (&) mit Klassen implementieren können.

Letzte Worte

Wie Sie in den Artikeln sehen, können wir sowohl mit Typaliasen als auch mit Schnittstellen alles machen. Wir können also nicht streng sagen, dass das eine besser ist als das andere. Am Ende ist es die persönliche Entscheidung, sich für einen von ihnen zu entscheiden. Sie werden schließlich Ihren Stil entwickeln, sie zu verwenden.

Als nächstes können Sie Typescript vs. Javascript ausprobieren.

Viel Spaß beim Codieren