Fallbeispiel zur TypeScript-Schnittstellendefinition

Die Rolle der Schnittstelle:

Schnittstelle, auf Englisch: Interface, ihre Funktion kann einfach so verstanden werden: Bereitstellung einer Konvention für unseren Code.

So wird es in Typescript beschrieben:

• Eines der Kernprinzipien von TypeScript besteht darin, die Struktur der Werte auf ihren Typ zu überprüfen. Es wird manchmal als „Duck-Typing“ oder „strukturelles Subtyping“ bezeichnet.
• In TypeScript werden Schnittstellen verwendet, um diese Typen zu benennen und Verträge für Ihren Code oder Drittanbietercode zu definieren.

Zum Beispiel:

//Definieren Sie die Schnittstelle Person
Schnittstelle Person {
    Name: Zeichenfolge;
    Alter: Anzahl;
}

//Geben Sie den Typ der definierten Variable man als unseren Personen-„Typ“ an [Dieser Ausdruck ist nicht sehr genau, dient nur dem besseren Verständnis]
lass Mann: Person;

// Wenn wir an diesem Punkt „man“ einen Wert zuweisen, muss „man“ die von uns definierten Personenbeschränkungen erfüllen. Das heißt, es muss ein Altersfeld vom Typ „Zahl“ und ein Namensfeld vom Typ „String“ vorhanden sein. man = { age: 10, name: 'syw' }
# Oder so function fun(women:Person){} // Der Parameter women muss auch die Person-Einschränkung erfüllen

Im obigen Beispiel habe ich kurz darüber gesprochen, wie man eine Schnittstelle und ihre Funktionen definiert. Jetzt werde ich kurz über andere Möglichkeiten sprechen, mit Schnittstellen zu spielen:

Legen Sie die optionalen Schnittstelleneigenschaften fest:

Eine Schnittstelle mit optionalen Attributen ähnelt einer normalen Schnittstellendefinition, mit dem Unterschied, dass nach der Definition des optionalen Attributnamens ein ?-Symbol hinzugefügt wird.

Schnittstelle Person {
    Name: Zeichenfolge
    Alter?: Zahl
}

Optionale Attribute werden am häufigsten verwendet, wenn wir nicht sicher sind, ob dieser Parameter übergeben wird oder existiert.

Die Vorteile optionaler Parameter werden in Typescript wie folgt beschrieben:

• Ein Vorteil optionaler Attribute besteht darin, dass Sie möglicherweise vorhandene Attribute vordefinieren können. Der zweite Vorteil besteht darin, dass Sie Fehler beim Verweisen auf nicht vorhandene Attribute abfangen können.

Zusätzliche Eigenschaftsprüfungen:

Apropos, eine einfache Zusammenfassung lautet: Wir können Attribute als optional festlegen, aber wir können keine falschen Attribute übergeben.

• Wenn wir die obige Person-Schnittstelle als Beispiel nehmen und bei der Verwendung das Altersattribut irrtümlicherweise als „aag“ schreiben, meldet Typescript einen Fehler, obwohl das Altersattribut selbst nicht übergeben werden muss.

Dies ist die zusätzliche Eigenschaftsprüfung.

Natürlich können wir auch Typbehauptungen verwenden, um diese Eigenschaftsprüfungen zu umgehen, siehe den Link: Typbehauptungen in TypeScript [as-Syntax | ＜＞-Syntax]

Legen Sie das schreibgeschützte Schnittstellenattribut fest:

Einige Objekteigenschaften können nur beim ersten Erstellen des Objekts geändert werden. Daher können wir readonly vor dem Attributnamen verwenden, um ein schreibgeschütztes Attribut anzugeben.

Schnittstelle Person {
    schreibgeschützter Name: Zeichenfolge;
    schreibgeschütztes Alter: Zahl;
}
// Anfangswerte zuweisen let man: Person = {name: 'syw', age: 10};

// Wenn Sie den Wert jetzt ändern, tritt ein Fehler auf.
man.age = 20; // Fehler!
// „Alter“ kann nicht zugewiesen werden, da es sich um eine schreibgeschützte Eigenschaft handelt.

Tatsächlich ist die Wirkung der Verwendung schreibgeschützter Attribute ähnlich wie bei const. Natürlich sind die beiden überhaupt nicht dasselbe. Ich sage das nur zum leichteren Verständnis.

In Typescript werden readonly und const wie folgt beschrieben:

• Am einfachsten können Sie bestimmen, ob Sie readonly oder const verwenden möchten, indem Sie prüfen, ob Sie es als Variable oder als Attribut verwenden möchten. Bei Verwendung als Variable verwenden Sie „const“, bei Verwendung als Eigenschaft „readonly“.

Funktionstyp-Schnittstelle:

Einfach ausgedrückt gibt die Schnittstelle eines Funktionstyps die Parametertypen der Funktion und den Rückgabewerttyp der Funktion an.

Schnittstelle PersonFun {
    (Name: Zeichenfolge, Alter: Zahl): Boolesch
}
// Definieren Sie eine Funktion, die die PersonFun-Einschränkung erfüllt let manFun: PersonFun = (name: string, age: number) => {
    Rückkehralter > 10;
}

Beachten:

1. Funktionsparametertypen können nicht geändert werden und der Rückgabewert muss ebenfalls den Einschränkungen entsprechen.
2. Funktionsparameternamen müssen nicht mit den Namen in der Schnittstelle übereinstimmen, solange die Typen der entsprechenden Parameterpositionen kompatibel sind.

// Dies erfüllt auch die Anforderungen let manFun: PersonFun = (name12: string, age12: number) => {
    Rückkehralter > 10;
}

Schnittstelle für indexierbaren Typ:

Einfach ausgedrückt bedeutet die indizierbare Typschnittstelle, dass wir den Indextyp und den Typ des Rückgabewerts angeben können.

• Beispielsweise können wir in einem Array angeben, dass der Index ein Zahlenwert und der Index ein Zeichenfolgenwert ist. Auf diese Weise ist die Form des Arrays grundsätzlich festgelegt.

Schnittstelle PersonArr {
    [Index: Zahl]: Zeichenfolge
}
// Array definieren let manArr: PersonArr = ['syw','syw1','syw2'];
// Abfrage manArr[0]; // Zu diesem Zeitpunkt ist 0 der Index der Typnummer und das 0. Element gibt syw vom Typ String zurück

Typescript unterstützt zwei Arten von Indexsignaturen, die eigentlich Indextypen sind: Zahl und Zeichenfolge.

Und wenn wir einen Index vom Zahlentyp verwenden, muss der definierte Rückgabewerttyp ein Untertyp des für den Index vom Zeichenfolgentyp definierten Rückgabewerts sein.

Typescript erklärt diesen Satz folgendermaßen:

• Wenn Sie zum Indizieren eine Zahl verwenden, konvertiert JavaScript diese in eine Zeichenfolge und verwendet sie dann zum Indizieren des Objekts. Das heißt, die Indizierung mit 100 (einer Zahl) ist gleichbedeutend mit der Indizierung mit „100“ (einer Zeichenfolge), daher müssen die beiden konsistent sein.

Als ich diesen Satz zum ersten Mal sah, verstand ich die Bedeutung des Textes, wusste aber nicht, wie ich ihn einfach ausdrücken sollte. Nach sorgfältigem Studium wurde mir klar, dass es vielleicht daran lag, dass ich mich noch nicht so gut damit auskenne. Eigentlich ist es ganz einfach:

// Beispielsweise hat mein PersonArr zwei Indizes, einer ist vom Typ Index (Zahl) und der andere vom Typ Element (Zeichenfolge). Wenn ich die Rückgabewerte dieser beiden Indizes definiere, muss ich mich strikt an das Obige halten:
// Wenn Sie einen Index vom Zahlentyp verwenden, muss der Rückgabewerttyp ein Untertyp des Rückgabewerts des Index vom Zeichenfolgentyp sein.

// Daher wird die Schnittstelle, die ich unten definiere, einen Fehler melden. Schnittstelle PersonArr {
    [Index: Zahl]: Zeichenfolge;
    [Element: Zeichenfolge]: Zahl;
}
// Da der Index-Rückgabewert vom Typ String ist, handelt es sich offensichtlich nicht um einen Subtyp des Item-Rückgabewerts vom Typ Number. // Wie schreibe ich das richtig? Am einfachsten geht das, indem Sie den Typ des Indexrückgabewerts in eine Zahl ändern.

Dies ist das Ende dieses Artikels über das Tutorial zur TypeScript-Schnittstellendefinition. Weitere verwandte Inhalte zur TypeScript-Schnittstellendefinition finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!