Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung von Schnittstellen und Klassen in Typescript (mit Beispielen)

Detaillierte Erläuterung von Schnittstellen und Klassen in Typescript (mit Beispielen)

不言
不言nach vorne
2018-10-19 14:38:162174Durchsuche

Dieser Artikel bietet Ihnen eine detaillierte Erklärung der Schnittstellen und Klassen (mit Beispielen). Ich hoffe, dass er für Freunde hilfreich ist.

Der Einfachheit halber wird Typoskript in Zukunft als ts abgekürzt

InterfaceInterface

Einige Schüler sind möglicherweise nicht mit Schnittstellen vertraut Bei typisierten Sprachen ist es schwierig, Spuren davon auf der Sprachebene zu erkennen. Im Gegensatz zu stark typisierten Sprachen wird die Sprachebene berücksichtigt. Aber in der ts-Welt können wir seine Spuren sehen. Um es ganz klar auszudrücken: Es ist nur dafür verantwortlich, zu definieren und zu erklären, was sich in Ihrem Objekt befindet, das heißt, es kann natürlich nicht instanziiert werden.

Definition

Also, wie definiert man die Schnittstelle? Natürlich verwenden Sie das Schlüsselwort interface

interface IA {
    name: string
}

Das Obige deklariert die Schnittstelle IA, die hat Der Attributname ist ein Zeichenfolgentyp
Auf diese Weise können wir den IA-Typ einer Variablen deklarieren und einen Anfangswert zuweisen

var a: IA = {
    name: 'hello'
}

Geerbt

Die Schnittstelle kann auch vererbt werden, wenn Sie eine IB-Schnittstelle haben, die auch die Struktur von IA enthält, können Sie diese einfach erben und Ihre eigenen Attribute erweitern

interface IB extends IA {
    id: number
}

Klasse

Eine Klasse ähnelt einer Schnittstelle, aber neben Definitionen gibt es auch Implementierungen, z. B. das Zuweisen von Werten zu Variablen, die instanziiert werden können

Definition

Das definierte Schlüsselwort ist Klasse. Ich glaube, dass Schüler, die mit es6 vertraut sind, schon lange daran gewöhnt sind

class A {
    a: string = 'xxxxx'
}

Das Obige definiert Klasse A, die einen Zeichenfolgentyp a hat, und weist zu Es hat einen Anfangswert von xxxxx, sodass wir es wie folgt verwenden, instanziieren und auf das Attribut a verweisen können

var a = new A()
console.log(a.a)

Natürlich können wir das Attribut a auch ändern

Öffentliche, private, geschützte und andere Mitgliederzugriffsmodifikatoren

Das Attribut hat Zugriff. Die Berechtigungen sind unterteilt in welche Mitglieder zugreifen können und wer darauf zugreifen kann

öffentlich, d. h. jeder kann darauf zugreifen

Nur ​​interne Mitglieder können darauf zugreifen

Geschützt ist geschützt, außer Ihnen selbst, jeder, der diese Klasse erbt, kann darauf zugreifen

Die oben genannten Schlüsselwörter werden normalerweise vor den Attributen hinzugefügt. Wenn nicht, sind sie öffentlich.

Die sogenannten Mitglieder, beschränken Sie sie nicht auf Attribute, einschließlich Methoden, werden auch als Funktionen bezeichnet, sind es aber
class A {
    public a = 'a'
    private b = 'b'
    protected c = 'c'
}

Beachten Sie, dass für das Attribut oben kein Typ angegeben ist. Dies ist zulässig, da der entsprechende Wert aus dem Anfangswert

Konstruktor

Apropos Klassen: Diese Funktion ist etwas ganz Besonderes. Sie wird beim Instanziieren aufgerufen, dh wenn eine Funktion neu ist . In ts wird es als Konstruktor definiert und implementiert. Streng genommen ist dies natürlich die Regel in js.

Tatsächlich unterscheiden sich Konstruktoren nicht von gewöhnlichen Funktionen. Sie können Parameter haben, und der Funktionskörper ist die Implementierung. Sie können das obige A neu schreiben und einem Selbst wenn Sie einen beliebigen Konstruktor definieren, wird dieser verwendet. Es gibt einen Standardkonstruktor, der jedoch nichts bewirkt

class A {
    a: string
    constructor(arg: string) {
        this.a = arg
    }
}

In ts hat der Konstruktor auch eine magische Funktion, das heißt, er wird definiert und erhält einen Anfangswert in den Konstruktorparametern, nicht in der Klasse Wiederholen Sie die Deklaration und weisen Sie im Konstruktor einen Anfangswert zu, wie folgt
class A {
    constructor(public a: string)
}

Oben haben wir ein String-Attribut a in A definiert und den ersten Parameter des Konstruktors zugewiesen it

Vererbung

Ähnlich wie bei Schnittstellen verwendet auch die Klassenvererbung das Schlüsselwort „extends“

class B extends A {
    d: number = 1
}

Implementierung von Schnittstellen

Klassen können nicht nur bestehende erben. Wenn Sie eine Klasse haben, können Sie auch eine Schnittstelle implementieren. Es ist zu beachten, dass die Attribute in der Schnittstelle entsprechende Implementierungen in der Klasse haben müssen

Das Schlüsselwort für die Implementierung lautet implementiert

class C implements IA {
    name = 'c'
}

Natürlich können Sie Implementierung und Vererbung gleichzeitig verwenden. Das ist auch kein Problem
class D extends A implements IA {
    name = 'd'
}

Statische Mitglieder

Gewöhnliche Mitglieder existieren jeweils separat Während statische Mitglieder in der Klasse gemeinsam genutzt werden, d . Wenn Sie darauf zugreifen müssen, rufen Sie es einfach wie folgt auf:

class A {
    static sa = 'nnnn'
}

Aus Platzgründen hören wir hier auf. Weitere Inhalte werden später besprochen 🎜>

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Schnittstellen und Klassen in Typescript (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen