Typscript für Anfänger, Teil 4: Klassen

Mit dieser Reihe von Tutorials werden Sie Schritt für Schritt zum Erlernen von TypeScript -Erkenntnissen führen. Der erste Teil führt kurz TypeScript ein und empfiehlt einige IDEs, mit denen TypeScript geschrieben werden kann. Der zweite Teil konzentriert sich auf Datentypen, und der dritte Teil erörtert die Grundlagen der TypeScript -Schnittstelle.

Wie Sie wahrscheinlich bereits wissen, unterstützt JavaScript nun nativ Klasse und objektorientiertes Programmieren. Mit dem Typenkripte können Entwickler jedoch lange Zeit Klassen in ihrem Code verwenden. Dieser Code wird dann in JavaScript -Code zusammengestellt, der in allen wichtigen Browsern ausgeführt werden kann. In diesem Tutorial erfahren Sie über Klassen in TypeScript. Sie ähneln ihren ES6 -Gegenstücken, sind aber strenger.

Erstellen Sie Ihre erste Klasse

Beginnen wir mit den Grundlagen. Klassen sind der grundlegende Teil der objektorientierten Programmierung. Sie können Klassen verwenden, um jedes Unternehmen mit bestimmten Eigenschaften und Funktionen darzustellen, die auf eine bestimmte Eigenschaft wirken können. Mit dem Typenschriften können Sie die vollständige Kontrolle über Eigenschaften und Funktionen erhalten, die innerhalb und außerhalb der Klassen zugänglich sind. Hier ist ein grundlegendes Beispiel dafür, wie man eine Klasse erstellt.

Möglicherweise haben Sie festgestellt, dass der Konstruktor ähnlich ist wie get and name sowie get , aber nicht readonly . Wenn nicht explizit angegeben, wird der Parametertyp des Setters aus dem Rückgabetyp des Getters abgeleitet. Ausgehend von TypeScript 4.3 können Sie einen Setter haben, der verschiedene Typen akzeptiert als der von Getter zurückgegebene Typ.

Implementierung von Klassen mithilfe der Schnittstelle

In unserem vorherigen Tutorial über die TypeScript -Schnittstelle haben wir erfahren, dass Schnittstellen im Grunde genommen verwendet werden, um die Struktur verschiedener Objekte anzugeben, die wir in unserem Code verwenden. Jetzt werden wir lernen, wie Sie Klassen basierend auf einigen zuvor deklarierten Schnittstellen implementieren.

 Schnittstelle ipoint {
    X: Zahl;
    Y: Zahl;
    Position (x: Nummer, y: Nummer): void
}

Schnittstelle Irectangle erweitert ipoint {
    Breite: Nummer;
    Länge: Zahl;
    Bereich (Breite: Nummer, Länge: Nummer): Nummer
}

Klassenpunkt implementiert ipoint {
    X: Zahl;
    Y: Zahl;

    Konstruktor (x: Nummer, y: Nummer) {
        this.x = x;
        this.y = y;
    }

    Position (): void {
        console.log (`Der Punkt ist bei ($ {this.x}, $ {this.y}).`);
    }
}

Klasse Rechteck implementiert Irectangle {
    Breite: Nummer;
    Länge: Zahl;
    X: Zahl;
    Y: Zahl;

    Konstruktor (x: Nummer, y: Nummer, Breite: Nummer, Länge: Nummer) {
        this.x = x;
        this.y = y;
        this.width = width;
        diese.länge = Länge;
    }

    Area (): Nummer {
        Gibt dies zurück.
    }

    Position (): void {
        console.log (`Das Rechteck ist bei ($ {this.x}, $ {this.y}).`);
    }
}

MyPoint = New Point (10, 20);

lass myRect = neues Rechteck (0, 0, 20, 30);

myPoint.position ();

myRect.position ();

console.log (myRect.area ());

Wir haben eine IRectangle -Schnittstelle erstellt, genau wie im vorherigen Tutorial. Eine zusätzliche Änderung hier ist, dass wir der Schnittstelle auch eine Funktionserklärung hinzufügen.

IRectangle , was bedeutet, dass diese vier Eigenschaften und zwei Methoden seine Position ausgeben und ihren Bereich anzeigen.

Zusammenfassen

In diesem Tutorial versuche ich, die Grundlagen von Klassen in Typenkript vorzustellen. Wir haben zuerst eine sehr einfache Person erstellt, die den Namen einer Person in die Konsole druckt. Danach lernen Sie das private Keyword, mit dem Sie zu einem bestimmten Zeitpunkt des Programms auf Mitglieder einer Klasse zugreifen können.

Schließlich haben Sie gelernt, wie Sie mithilfe ererbter Basisklassen verschiedene Klassen in Ihrem Code erweitern können. Sie können mehr über Klassen in der offiziellen Dokumentation erfahren.

Das obige ist der detaillierte Inhalt vonTypscript für Anfänger, Teil 4: Klassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!