Beispiele für die korrekte Verwendung von Schnittstellen- und Typmethoden in TypeScript

Vorwort

Sowohl Schnittstelle als auch Typ werden zum Definieren von Typen verwendet, was als definierende Formen verstanden werden kann. Eine Form stellt einen Designrahmen dar, oder anders ausgedrückt eine Klasse von Dingen, solange sie bestimmte Eigenschaften oder Verhaltensweisen aufweisen. In einigen Sprachen, wie etwa Java, werden Schnittstellen verwendet, um Verhaltensweisen zu definieren. Wenn eine Klasse eine Schnittstelle implementiert, bedeutet dies, dass die Klasse ein bestimmtes Verhalten oder eine bestimmte Fähigkeit hat, wie etwa beschreibbar oder lesbar. Dinge können nach Verhalten unterteilt werden. Schnittstelle wird in Golang häufig verwendet, aber in TypeScript ähnelt Schnittstelle eher einer Typform. TypeScript bietet auch Typen zum Definieren von Typen. Tatsächlich gibt es in TypeScript keinen großen Unterschied zwischen Schnittstelle und Typ, aber dennoch einen kleinen Unterschied.

Schnittstelle

Mithilfe einer Schnittstelle kann eine Klasse, ein Objekt oder eine Funktion gestaltet werden.

Schnittstelle Tut{
    Titel:Zeichenfolge
    ist abgeschlossen:boolean
}

Definieren Sie eine Schnittstelle, um den Tut-Typ darzustellen, und definieren Sie dann eine Variable machineLearningTut vom Typ Tut

const machineLearningTut:Tut = {
    Titel: „Grundlagen des maschinellen Lernens“,
    ist abgeschlossen:true
}

Wenn das machineLearningTut vom Typ Tut die Attribute oder Methoden der Schnittstellendefinition nicht vollständig implementiert, wird während der Kompilierungsphase eine freundliche Eingabeaufforderung angezeigt.

const machineLearningTut:Tut = {
    Titel: „Grundlagen des maschinellen Lernens“,
}

Tipp: Das machineLearningTut vom Typ Tut implementiert die in der Schnittstelle deklarierte Eigenschaft isComplete nicht.

Die Eigenschaft „isComplete“ fehlt im Typ „{ title: string; }“, ist aber im Typ „Tut“ erforderlich.ts(2741)

[demo2.ts(3, 5): ]()'isComplete' wird hier deklariert.

Klasse VideoTut implementiert Tut{
    Titel: Zeichenfolge;
    ist abgeschlossen:boolean;
}

Sie können auch eine Klasse VideoTut definieren, um die Tut-Schnittstelle zu implementieren

Schnittstelle Begrüßung{
    (Name:Zeichenfolge):Zeichenfolge
}

const greet:Greet = (name) => `hallo ${name}`

Sie können auch die Greet-Schnittstelle für die Shape-Funktion definieren und dabei die Parameter der Funktion und den Rückgabewerttyp der Funktion festlegen.

Schnittstelle AdvanceTut erweitert Tut{
    istFrei:boolean
}

const machineLearningTut:AdvanceTut = {
    Titel: „Grundlagen des maschinellen Lernens“,
    ist abgeschlossen:wahr,
    istFrei:true
}

Schnittstellen können durch „extend“ erweitert werden. AdvanceTut ist eine Erweiterung von Tut. Wenn ein Typ „extend“ nicht unterstützt, kann er zwischen Typen erweitert werden.

Schnittstelle Tut{
    Titel:Zeichenfolge
    ist abgeschlossen:boolean
}

Schnittstelle Tut{
    istFrei:boolean
}

const machineLearningTut:Tut = {
    Titel: „Grundlagen des maschinellen Lernens“,
    ist abgeschlossen:wahr,
    istFrei:true
}

Zwei Tuts mit demselben Schnittstellennamen werden nacheinander deklariert. Es wird gezeigt, dass diese beiden Tuts in einer erweiterten Beziehung stehen, nicht in einer übergeordneten Beziehung, was ebenfalls eine Funktion ist, die dieser Typ nicht hat.

Typ

Tatsächlich ähnelt die Verwendung von „Typ“ der von „Schnittstelle“, aber „Typ“ ist praktisch für Typen und kann ein Alias ​​für grundlegende JavaScript-Typen sein. Tatsächlich unterscheidet sich der Typ wesentlich von der Schnittstelle. Auch wenn dies erklärt wird, müssen Sie es möglicherweise dennoch langsam in der Praxis erleben.

Typ ist vollständig = Boolesch
Typ Titel = Zeichenfolge
Typ Begrüßung = (Name:Zeichenfolge)=>Zeichenfolge

Typ Tut = {
    Titel: Zeichenfolge;
    ist abgeschlossen:boolean
}

const machineLearningTut:Tut = {
    Titel: „Titel des maschinellen Lernens“,
    ist abgeschlossen:true
}

Typ Tut = {
    Titel: Zeichenfolge;
    ist abgeschlossen:boolean
} & {
    istFrei:boolean
}

const machineLearningTut:Tut = {
    Titel: „Titel des maschinellen Lernens“,
    ist abgeschlossen:wahr,
    istFrei:true
}

Typ kann die Erweiterung des Typs implementieren

Typ VideoTut = Tut | {
    istFrei:boolean
}

const machineLearningTut:VideoTut = {
    Titel: „Titel des maschinellen Lernens“,
    ist abgeschlossen:wahr,
    istFrei:true
}

Exporttyp InputProps = {
    Typ: „Text“|„E-Mail“;
    Wert: Zeichenfolge;
    beiÄnderung:(neuerWert:Zeichenfolge)=>void
}

Darüber hinaus können die Front-End- und Back-End-Typen auch mithilfe von Typen definiert werden. Wie unten gezeigt, können mehrere Basistypen definiert werden, und diese definierten Typen können neue Typen definieren.

Typ bei Änderungstyp = (neuerWert:Zeichenfolge)=>void

Typ InputType = „Text“|„E-Mail“;

Typ Eingabewert = Zeichenfolge

Exporttyp InputProps = {
    Typ:Eingabetyp;
    Wert:Eingabewert;
    bei Kanal: bei Kanaltyp
}

Anhang: Unterschiede zwischen Schnittstelle und Typ

Typ kann grundlegende Typaliase, Union-Typen, Tupel usw. deklarieren.

// Basistyp Aliastyp Name = Zeichenfolge;

//Union-Typ-Schnittstelle Dog {
    wong()
}
Schnittstelle Cat {
    miao();
}

Typ Haustier = Hund | Katze;

//Definieren Sie den Typ jeder Position im Array-Typ speziell. PetList = [Dog, Pet];

In der Typanweisung können Sie auch typeof verwenden, um den Typ der Instanz für die Zuweisung abzurufen.

// Wenn Sie den Typ einer Variablen ermitteln möchten, verwenden Sie typeof
let div = document.createElement('div');
Typ B = Typ von Div;

TypAndere Tricks

Typ StringOrNumber = Zeichenfolge | Zahl;
Typ Text = Zeichenfolge | { Text: Zeichenfolge };
Typ NameLookup = Wörterbuch<Zeichenfolge, Person>;
Typ Callback<T> = (Daten: T) => void;
Typ Paar<T> = [T, T];
Typ Koordinaten = Paar<Zahl>;
Typ Tree<T> = T | { links: Tree<T>, rechts: Tree<T> };

Schnittstelle kann Zusammenführung deklarieren

Schnittstelle Benutzer {
    Name: Zeichenfolge;
    Alter: Anzahl;
}

Schnittstelle Benutzer {
    Geschlecht: Zeichenfolge;
}

Die Benutzeroberfläche ist:

{
    Name: Zeichenfolge;
    Alter: Anzahl;
    Geschlecht: Zeichenfolge;
}

Zusammenfassen

Dies ist das Ende dieses Artikels über die korrekte Verwendung von Schnittstelle und Typ in TypeScript. Weitere Inhalte zur Verwendung von Schnittstelle und Typ in TypeScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!