Einführung in TypeScript-Schnittstellen

Vorwort:

Eines der Kernprinzipien von TS besteht darin, die vorhandenen Strukturen auf ihren Typ zu überprüfen. Der Zweck einer Schnittstelle besteht darin, diese Typen zu benennen und einen Vertrag für Ihren Code oder Drittanbietercode zu definieren.

Der Code, der schließlich in JavaScript Code kompiliert wird, enthält keine Schnittstellen und Typbeschränkungen.

1. Schnittstellendefinition

Die Rolle der Schnittstelle ähnelt der type Typschlüsselworts, ist jedoch unterschiedlich. Typ kann einfache Datentypen definieren, wie zum Beispiel der folgende Code

Typ str = Zeichenfolge

Diese Schreibmethode kann nicht in Schnittstellen angewendet werden, in denen nur Funktionstypen, Klassentypen und Array-Typen geschrieben werden können.

interface wird verwendet, um eine Schnittstelle in TS zu definieren.

Der Beispielcode lautet wie folgt:

//Definiere eine einfache Schnittstelle interface Person {
  Name: Zeichenfolge
}
//Definieren Sie die Get-Methode function getPersonName(person: Person): void {
  Konsole.log(Person.Name)
}
//Definieren Sie die Set-Methode function setPersonName(person: Person, name: string): void {
  person.name = Name
}
// Definiere ein Personenobjekt let person = {
  Name: 'Eine Schüssel Haferbrei',
}
setPersonName(Person, 'Yiwan Zhou')
// Änderung erfolgreich getPersonName(person) // Yiwan Zhou

Die Person Schnittstelle ist wie ein Name, der verwendet wird, um die Anforderungen für die Verwendung der Schnittstelle zu beschreiben. Beispielsweise erfordert diese Schnittstelle ein name und sein Typ ist Zeichenfolge.

Es ist anzumerken, dass bei der Typprüfung nicht die Reihenfolge der Eigenschaften geprüft wird, sondern nur verlangt wird, dass die entsprechenden Eigenschaften vorhanden sind und vom gleichen Typ sind.

2. Attribute

2.1 Optionale Attribute

Wenn eine Eigenschaft in einer Schnittstelle optional ist oder nur unter bestimmten Bedingungen existiert, können Sie neben dem Eigenschaftsnamen ein ?-Zeichen hinzufügen. Der Beispielcode lautet wie folgt:

;(Funktion () {
  //Definiere eine einfache Schnittstelle interface Person {
    Name: Zeichenfolge
    // Gibt an, dass das Alter optional ist Alter?: Zahl
  }
  // Definiere ein Personenobjekt let person = {
    Name: 'Eine Schale Zhou',
    Alter: 18,
    Hobby: 'Programmieren',
  }
  //Definieren Sie die Get-Methode function getPersonName(person: Person): void {
    // console.log(Person.Alter, Person.Hobby) // Eigenschaft „Hobby“ existiert beim Typ „Person“ nicht.
  }
})()

Zu diesem Zeitpunkt können wir das sex Attribut schreiben oder nicht, aber das hobb -Attribut löst eine Ausnahme aus, wenn wir es aufrufen, da es in der Schnittstelle nicht definiert ist.

2.2 Schreibgeschützte Eigenschaften

Wenn Sie eine Eigenschaft schreibgeschützt machen möchten, fügen Sie vor der Eigenschaft einfach readonly hinzu.

Der Beispielcode lautet wie folgt:

;(Funktion () {
  Schnittstelle Person {
    // Namen auf schreibgeschützt setzen schreibgeschützter Name: Zeichenfolge
  }
  // Definiere ein Personenobjekt let person = {
    Name: 'Eine Schale Zhou',
  }
  //Definieren Sie die Set-Methode function setPersonName(person: Person, name: string): void {
    person.name = Name // Kann „Name“ nicht zugewiesen werden, da es sich um eine schreibgeschützte Eigenschaft handelt.
  }
  setPersonName(Person, 'eine Schüssel Haferbrei')
})()

3. Klassentyp

3.1 Vererbungsschnittstelle

Wie Klassen können Schnittstellen voneinander erben. Dadurch können wir Mitglieder von einer Schnittstelle in eine andere kopieren, was uns mehr Flexibilität beim Aufteilen von Schnittstellen in wiederverwendbare Module gibt.

Die Schnittstellenvererbung erfolgt über das Schlüsselwort extends. Der Beispielcode lautet wie folgt:

// Definiere zwei Schnittstellen Schnittstelle PersonName {
  Name: Zeichenfolge
}
Schnittstelle PersonAge {
  Alter: Anzahl
}

// Definieren Sie eine Person-Schnittstelle, die von den beiden oben genannten Schnittstellen erbt. Es werden mehrere Schnittstellen verwendet, getrennt durch Kommas. Schnittstelle Person erweitert PersonName, PersonAge {
  Hobby: Schnur
  //Definiere eine Methode, deren Rückgabewert ein String ist
  say(): Zeichenfolge
}
lass Person = {
  Name: 'Eine Schale Zhou',
  Alter: 18,
  Hobby: 'Programmieren',
  // Beispielmethode say() {
    Rückkehr 'Eine Schale Zhou'
  },
}
//Definieren Sie die Get-Methode function getPersonName(person: Person): void {
  console.log(Person.Name, Person.Alter, Person.Hobby)
}
getPersonName(Person) // Yiwan Zhou 18 Kodierung

Wird beim Erben mehrerer Schnittstellen verwendet, getrennt durch Kommas.

4. Funktionstyp

In TS können Schnittstellen auch Schnittstellen von Funktionstypen beschreiben.

Die Definition einer Funktionstypschnittstelle ähnelt einer Funktionsdefinition mit nur einer Parameterliste und einem Rückgabewerttyp. Jeder Parameter in der Parameterliste erfordert einen Namen und einen Typ.

Der Beispielcode lautet wie folgt:

Schnittstelle MyAdd {
    (x: Zahl, y: Zahl): Zahl
}

Nachdem die Definition abgeschlossen ist, können wir diese Funktionsschnittstelle wie eine normale Schnittstelle verwenden.

Der Beispielcode lautet wie folgt:

let myAdd: MyAdd = (x: Zahl, y: Zahl): Zahl => {
    Rückgabewert x + y
}

Der obige Code entspricht der folgenden Funktionsdefinition:

let myAdd: (x: Zahl, y: Zahl) => Zahl = (
    x: Zahl,
    y: Zahl
): Zahl => {
    Rückgabewert x + y
}

Dies ist das Ende dieses Artikels über TypeScript Schnittstelle. Weitere verwandte Inhalte zur TypeScript-Schnittstelle 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!