Share
Seit dem Beginn dieser Serie haben wir TypeScript viel gelernt. Das erste Tutorial gab Ihnen eine kurze Einführung in TypeScript und schlug einige IDEs vor, die Sie zum Schreiben von TypeScript verwenden können. Das zweite Tutorial konzentrierte sich auf Datentypen, und das dritte Tutorial behandelte die Grundlagen der Schnittstellen in TypeScript.
Wie Sie vielleicht bereits wissen, hat JavaScript erst kürzlich die native Unterstützung für Klassen und die objektorientierte Programmierung hinzugefügt. Mit TypeScript können Entwickler jedoch lange Zeit Klassen in ihrem Code verwenden. Dieser Code wird dann zu JavaScript kompiliert, das für alle gängigen Browser geeignet ist. In diesem Tutorial lernen Sie Klassen in TypeScript kennen. Sie ähneln ihren ES6-Kollegen, sind aber strenger.
Beginnen wir mit den Grundlagen. Klassen sind ein grundlegender Bestandteil der objektorientierten Programmierung. Sie verwenden Klassen, um jede Entität darzustellen, die einige Eigenschaften und Funktionen hat, die sich auf bestimmte Eigenschaften auswirken. Mit TypeScript haben Sie die vollständige Kontrolle über die Eigenschaften und Funktionen, auf die innerhalb und außerhalb ihrer eigenen Klassenklasse zugegriffen werden kann. Hier ist ein sehr einfaches Beispiel für die Erstellung eines Person Klasse.
Accentsconagua
Klasse Person Name: String; Konstruktor (theName: string) this.name = theName; IntroductionSelf () console.log ("Hallo, ich bin" + this.name + "!"); lassen Sie personA = neue Person ("Sally"); personA.introduceSelf ();Der obige Code erstellt eine sehr einfache Klasse namens Person. Diese Klasse hat eine Eigenschaft namens Name und eine Funktion aufgerufen sich vorstellen. Die Klasse hat auch einen Konstruktor, der im Grunde auch eine Funktion ist. Konstruktoren sind jedoch besonders, weil sie jedes Mal aufgerufen werden, wenn wir eine neue Instanz unserer Klasse erstellen.
Sie können auch Parameter an Konstruktoren übergeben, um verschiedene Eigenschaften zu initialisieren. In unserem Fall verwenden wir den Konstruktor, um den Namen der Person, die wir erstellen, mithilfe von zu initialisieren Person Klasse. Das sich vorstellen Funktion ist eine Methode der Person Klasse, und wir verwenden es hier, um den Namen der Person auf der Konsole zu drucken. Alle diese Eigenschaften, Methoden und der Konstruktor einer Klasse werden zusammen als Klassenmitglieder bezeichnet.
Sie sollten daran denken, dass die Person Klasse erstellt nicht automatisch eine Person von selbst. Es verhält sich eher wie ein Entwurf mit allen Informationen zu den Attributen, die eine Person einmal erstellt haben sollte. In diesem Sinne haben wir eine neue Person geschaffen und sie Sally genannt. Aufruf der Methode sich vorstellen Auf dieser Person wird die Zeile "Hallo, ich bin Sally!" zur Konsole.
Im vorherigen Abschnitt haben wir eine Person mit dem Namen Sally erstellt. Derzeit ist es möglich, den Namen der Person an beliebiger Stelle in unserem Code von Sally in Mindy zu ändern, wie im folgenden Beispiel gezeigt.
Klasse Person Name: String; Konstruktor (theName: string) this.name = theName; vorstellenSelf () console.log ("Hallo, ich bin" + this.name + "!"); lassen Sie personA = neue Person ("Sally"); // Druckt "Hi, ich bin Sally!" personA.introduceSelf (); personA.name = "Mindy"; // Druckt "Hi, ich bin Mindy!" personA.introduceSelf (); Sie haben vielleicht bemerkt, dass wir beide verwenden konnten Name Eigentum und die sich vorstellen Methode außerhalb der enthaltenden Klasse. Dies liegt daran, dass alle Member einer Klasse in TypeScript sind Öffentlichkeit standardmäßig. Sie können auch explizit angeben, dass eine Eigenschaft oder Methode öffentlich ist, indem Sie das Schlüsselwort hinzufügen Öffentlichkeit bevor.
Manchmal möchten Sie nicht, dass eine Eigenschaft oder Methode außerhalb der enthaltenen Klasse verfügbar ist. Dies kann erreicht werden, indem diese Mitglieder mit der Privatgelände Stichwort. Im obigen Code könnten wir die Namenseigenschaft festlegen Privatgelände und verhindern, dass es außerhalb der enthaltenen Klasse geändert wird. Nach dieser Änderung zeigt TypeScript eine Fehlermeldung an, dass das Name Eigentum ist Privatgelände und Sie können nur innerhalb der Person Klasse. Der folgende Screenshot zeigt den Fehler in Visual Studio Code.
Mit Vererbung können Sie komplexere Klassen ausgehend von einer Basisklasse erstellen. Zum Beispiel können wir das verwenden Person Klasse aus dem vorherigen Abschnitt als Basis zum Erstellen eines Freund Klasse, die alle Mitglieder der Person und fügen Sie einige eigene Mitglieder hinzu. Ebenso können Sie auch eine hinzufügen Familie oder Lehrer Klasse.
Sie alle erben die Methoden und Eigenschaften der Person Fügen Sie einige Methoden und Eigenschaften hinzu, um sie voneinander zu unterscheiden. Das folgende Beispiel soll es klarer machen. Ich habe auch den Code für die hinzugefügt Person class hier, so dass Sie den Code der Basisklasse und der abgeleiteten Klasse leicht vergleichen können.
Klasse Person privater Name: Zeichenfolge; Konstruktor (theName: string) this.name = theName; IntroductionSelf () console.log ("Hallo, ich bin" + this.name + "!"); Klasse Freund erweitert Person yearsKnown: number; Konstruktor (Name: Zeichenfolge, Jahre, Bekanntheit: Nummer) Super (Name); this.yearsKnown = yearsKnown; timeKnown () console.log ("Wir sind Freunde seit" + this.yearsKnown + "Jahren") let friendA = neuer Freund ("Jacob", 6); // Drucke: Hallo, ich bin Jacob! friendA.introduceSelf (); // Prints: Wir sind seit 6 Jahren befreundet. friendA.timeKnown (); Wie Sie sehen können, müssen Sie das verwenden erweitern Schlüsselwort für die Freund Klasse, um alle Mitglieder des zu erben Person Klasse. Es ist wichtig zu wissen, dass der Konstruktor einer abgeleiteten Klasse immer den Konstruktor der Basisklasse mit einem Aufruf von aufrufen muss Super().
Sie haben vielleicht bemerkt, dass der Konstruktor von Freund brauchte nicht die gleiche Anzahl von Parametern wie die Basisklasse. Der Parameter first name wurde jedoch an übergeben Super() um den Konstruktor des übergeordneten Elements aufzurufen, der auch einen Parameter akzeptiert hat. Wir mussten das nicht neu definieren sich vorstellen Funktion innerhalb der Freund Klasse, weil es vom vererbt wurde Person Klasse.
Bis zu diesem Punkt haben wir auch nur Mitglieder einer Klasse gemacht Privatgelände oder Öffentlichkeit. Indem wir sie öffentlich machen, können wir von überall darauf zugreifen. Wenn Sie die Mitglieder privat machen, werden sie auf ihre eigene Klasse beschränkt. Manchmal möchten Sie, dass die Mitglieder einer Basisklasse in allen abgeleiteten Klassen verfügbar sind.
Du kannst den ... benutzen geschützt Modifikator in solchen Fällen, um den Zugriff eines Members nur auf abgeleitete Klassen zu beschränken. Sie können auch die geschützt Schlüsselwort mit dem Konstruktor einer Basisklasse. Dadurch wird verhindert, dass jemand eine Instanz dieser Klasse erstellt. Sie können jedoch weiterhin Klassen basierend auf dieser Basisklasse erweitern.
Klasse Person privater Name: Zeichenfolge; geschütztes Alter: Nummer; Geschützter Konstruktor (theName: string, theAge: number) this.name = theName; this.age = theAge; IntroductionSelf () console.log ("Hallo, ich bin" + this.name + "!"); Klasse Freund erweitert Person yearsKnown: number; Konstruktor (Name: Zeichenfolge, Alter: Anzahl, Jahre, Bekanntheit: Nummer) Super (Name, Alter); this.yearsKnown = yearsKnown; timeKnown () console.log ("Wir sind Freunde seit" + this.yearsKnown + "Jahren.") friendSince () let firstAge = this.age - this.yearsKnown; console.log ('Wir sind Freunde, seit ich $ firstAge Jahre alt war.') FreundA = neuer Freund ("William", 19, 8); // Prints: Wir sind Freunde, seit ich 11 Jahre alt war. friendA.friendSince ();Im obigen Code können Sie sehen, dass wir das gemacht haben Alter Eigentum geschützt. Dies verhindert die Verwendung von Alter außerhalb von Klassen, die von abgeleitet sind Person. Wir haben auch die verwendet geschützt Schlüsselwort für den Konstruktor der Person Klasse. Konstruktor als deklarieren geschützt bedeutet, dass wir die direkt nicht mehr instanziieren können Person Klasse. Der folgende Screenshot zeigt einen Fehler, der beim Versuch, eine Klasse mit der Instanz zu instanziieren, angezeigt wird geschützt Konstrukteur.
In diesem Tutorial habe ich versucht, die Grundlagen von Klassen in TypeScript zu behandeln. Wir begannen das Tutorial mit der Erstellung eines sehr grundlegenden Person Klasse, die den Namen der Person an die Konsole ausgegeben hat. Danach erfuhren Sie von der Privatgelände Schlüsselwort, mit dem verhindert werden kann, dass auf die Mitglieder einer Klasse an einer beliebigen Stelle im Programm zugegriffen wird.
Schließlich haben Sie gelernt, wie Sie verschiedene Klassen in Ihrem Code mithilfe einer Basisklasse mit Vererbung erweitern. In der offiziellen Dokumentation erfahren Sie mehr über Klassen.
Wenn Sie Fragen zu diesem Tutorial haben, lassen Sie es mich in den Kommentaren wissen.
