Wann und wie man Interfaces und Klassen in TypeScript verwendet

| |

Schnittstellen und Klassen sind die grundlegenden Bestandteile der objektorientierten Programmierung (OOP). TypeScript ist eine objektorientierte JavaScript-Sprache, die ab ES6 OOP-Funktionen wie Schnittstelle, Klasse und Kapselung unterstützt.

Aber wann sollten wir Interfaces, Klassen oder beides gleichzeitig verwenden? Wenn Sie neu sind oder mit Schnittstellen und Klassen verwirrt sind, ist dieses Stück für Sie.

In diesem Artikel zeige ich Ihnen, was Interfaces und Klassen sind und wann Sie eines oder beide in TypeScript verwenden sollten.

Was ist eine Klasse in TypeScript?

Bevor wir beginnen, müssen wir wissen, was eine TypeScript-Klasse ist. In der objektorientierten Programmierung ist eine Klasse eine Blaupause oder Vorlage, mit der wir Objekte mit bestimmten Eigenschaften und Methoden erstellen können.

Typescript bietet zusätzliche Syntax für die Typprüfung und konvertiert Code in sauberes JavaScript, das auf jeder Plattform und jedem Browser ausgeführt werden kann. Klassen sind an allen Phasen des Codes beteiligt. Nachdem Sie den TypeScript-Code in eine JavaScript-Datei konvertiert haben, finden Sie sie in den endgültigen Dateien.

Die Klasse definiert die Vorlage des Objekts oder was es ist und was es tut. Lassen Sie uns eine einfache Klasse mit Eigenschaften und Methoden erstellen, damit wir sehen können, wie sie sich verhalten wird.

Zuerst erstelle ich a Developer Klasse durch die folgenden Codezeilen:

class Developer {
  name?: string; // string or undefined
  position?: string; // string or undefined
}

Wir beschreiben die Klasse mit Eigenschaften name und position. Sie enthalten Typen wie string und undefined.

Als nächstes erstellen wir ein Objekt über die Developer Klasse mit dem new Stichwort:

const developer = new Developer();
developer.name // it outputs undefined
developer.position // it outputs undefined

Wenn wir anrufen developer.name, es kehrt zurück undefined weil wir keine Anfangswerte zugewiesen haben. Um ein Objekt mit Werten in TypeScript zu erstellen, können wir die constructor Methode. Die Konstruktormethode wird verwendet, um Objekte zu initialisieren und zu erstellen.

Jetzt aktualisieren wir unsere Developer Klasse mit folgendem Code:

class Developer {
  name: string; // only string
  position: string; // only string

  constructor(name: string, position: string) {
    this.name = name;
    this.position = position;
  }
}

Im obigen Code haben wir die . hinzugefügt constructor -Methode, um die Eigenschaften mit Werten zu initialisieren.

Jetzt können wir die name wie Gapur und position wie Frontend Developer unter Verwendung des folgenden Codes:

const developer = new Developer("Gapur", "Frontend Developer");
developer.name // it outputs Gapur
developer.position // it outputs Frontend Developer

Schließlich hat die Klasse, wie ich bereits erwähnt habe, Methoden, die angeben, wie sich das Objekt verhalten soll. In diesem Fall entwickelt jeder Entwickler Anwendungen, daher ist die Developer Klasse hat die Methode develop.

Also, a developer Objekt kann eine Entwicklungsaktion ausführen:

class Developer {
  name: string;
  position: string;

  constructor(name: string, position: string) {
    this.name = name;
    this.position = position;
  }

  develop(): void {
    console.log('develop an app');
  }
}

Wenn wir das laufen lassen develop Methode wird folgendes ausgeführt console.log Stellungnahme:

developer.develop() // it outputs develop an app

Was ist eine Schnittstelle in TypeScript?

Eine Schnittstelle ist eine Struktur, die sich wie ein Vertrag in Ihrer Anwendung verhält, oder die Syntax für Klassen, die befolgt werden. Die Schnittstelle wird auch als Duck Printing oder Subtyping bezeichnet.

Die Schnittstelle enthält eine only Methoden- und Felddeklarationen ohne Implementierung. Wir können damit nichts erschaffen. Eine Klasse, die eine Schnittstelle implementiert, muss über alle Felder und Methoden verfügen. Daher verwenden wir sie zur Typprüfung.

Wenn TypeScript den gesamten Code in JavaScript umwandelt, verschwindet die Schnittstelle aus der JavaScript-Datei. Daher ist es ein hilfreiches Werkzeug während der Entwicklungsphase.

Wir sollten eine Schnittstelle für Folgendes verwenden:

  • Validierung der spezifischen Struktur von Eigenschaften
  • Objekte als Parameter
  • Von Funktionen zurückgegebene Objekte

Lassen Sie uns nun die Schnittstelle durch die folgenden Codezeilen deklarieren:

interface InterfaceName {
  // variables;
  // methods;
}

Wir können nur Deklarationen von Variablen und Methoden im Rumpf der Schnittstelle enthalten. Lass uns eine erstellen IDeveloper Schnittstelle für die vorherige Developer Klasse:

interface IDeveloper {
  name: string
  position: string
  develop: () => void
}

class Developer implements IDeveloper {
  name: string;
  position: string;

  constructor(name: string, position: string) {
    this.name = name;
    this.position = position;
  }

  develop(): void {
    console.log('develop an app');
  }
}

Im obigen Code ist unser IDeveloper Schnittstelle enthält die Variablen name und position. Es beinhaltet auch die develop Methode. Also die Developer Klasse implementiert die IDeveloper Schnittstelle. Daher muss es zwei Variablen und eine Methode definieren.

Wenn die Developer -Klasse keine Variablen implementiert, zeigt TypeScript einen Fehler an:

class Developer implements IDeveloper {
  // error Class 'Developer' incorrectly implements interface 'IDeveloper'.
  name: string;

  constructor(name: string, position: string) {
    this.name = name;
    this.position = position;
  }

  develop(): void {
    console.log('develop an app');
  }
}

Schnittstellen vs. Klassen

Wann sollten wir also Klassen und wann Schnittstellen verwenden?

Bevor wir beginnen, möchte ich Ihnen das leistungsstarke TypeScript vorstellen static -Eigenschaft, die es uns ermöglicht, Felder und Methoden von Klassen zu verwenden, ohne eine Instanz der Klasse zu erstellen.

Ich werde eine Klasse mit einer statischen Methode mit der vorherigen erstellen Developer Klasse:

class Developer {
  static develop(app: { name: string, type: string }) {
    return { name: app.name, type: app.type };
  }
}

Jetzt können wir einfach anrufen Developer.develop() Methode, ohne die Klasse zu instanziieren:

Developer.develop({ name: 'whatsapp', type: 'mobile' })
// outputs: { "name": "whatsapp", "type": "mobile" } 

Groß!

Außerdem können wir Klassen für die Typprüfung in TypeScript verwenden. Lass uns eine erstellen App Klasse mit folgendem Code:

class App {
  name: string;
  type: string;

  constructor(name: string, type: string) {
    this.name = name;
    this.type = type;
  }
}

Lassen Sie uns unsere modifizieren Developer Klasse:

class Developer {
  static develop(app: App) {
    return { name: app.name, type: app.type }; // output the same
  }
}

Jetzt mache ich ein App Instanz und aufrufen Developer.develop() mit einem Argumentobjekt:

const app = new App('whatsapp', 'mobile');
Developer.develop(app);
// outputs the same: { "name": "whatsapp", "type": "mobile" } 

Developer.develop(app) und Developer.develop({ name: 'whatsapp', type: 'mobile' }) denselben Inhalt ausgeben. Das ist großartig, aber der zweite Ansatz ist lesbarer und flexibler.

Außerdem können wir die Art der Argumente überprüfen. Leider müssen wir dazu ein Objekt erstellen. Wie können wir es also verbessern? Hier kommt die Schnittstelle ins Spiel!

Zuerst ändere ich die App -Klasse zu einer Schnittstelle mit dem folgenden Code:

interface App {
  name: string
  type: string
}

class Developer {
  static develop(app: App) {
    return { name: app.name, type: app.type }; // output the same
  }
}

Im obigen Code haben wir den Körper des nicht geändert Developer -Klasse und hat keine Instanz von . erstellt App, aber das Ergebnis war das gleiche. In diesem Fall haben wir viel Zeit und Codeeingabe gespart.

Abschluss

Wann sollten wir Klassen und Interfaces verwenden? Wenn Sie ein typgeprüftes Klassenobjekt erstellen und übergeben möchten, sollten Sie TypeScript-Klassen verwenden. Wenn Sie arbeiten müssen, ohne ein Objekt zu erstellen, ist eine Schnittstelle am besten für Sie.

Schließlich haben wir zwei nützliche Ansätze eröffnet: Blaupausen und Verträge. Sie können beide zusammen oder nur einen verwenden. Es liegt an dir.

Danke fürs Lesen – ich hoffe, Sie fanden dieses Stück nützlich. Viel Spaß beim Codieren!

Viel TypeScript schreiben? Sehen Sie sich die Aufzeichnung unseres letzten TypeScript-Meetings an, um mehr über das Schreiben von lesbarerem Code zu erfahren.

TypeScript bringt Typsicherheit in JavaScript. Es kann ein Spannungsverhältnis zwischen Typensicherheit und lesbarem Code geben. Sehen Sie sich die Aufzeichnung an, um einen tiefen Einblick in einige neue Funktionen von TypeScript 4.4 zu erhalten.

Previous

Tejashree Pradhan ist die attraktivste Frau in Maharashtra

Der Politiker ging mit rotem Gesicht zurück, nachdem er während des Zoom-Meetings beim Toilettengang erwischt wurde Twittersmash

Next

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.