Verwendung von TypeScript-Generics

Vorwort:

Da es sich bei JavaScript um eine schwach typisierte Sprache handelt, kann die Kapselung einer API auf vielfältige Weise genutzt werden. Das allein aufgrund der schwachen Typisierung erzielte Endergebnis ist jedoch nicht das gewünschte.

Das Aufkommen von TypeScript löst dieses Problem zwar, aber wenn man die Wiederverwendung von API in Betracht zieht, scheint TypeScript nicht so flexibel zu sein. Derzeit können Sie jeden beliebigen Typ verwenden, um das Problem der mangelnden Flexibilität zu lösen. Dies führt jedoch erneut zu dem Problem in JavaScript und das Endergebnis entspricht möglicherweise nicht Ihren Erwartungen.

Um dieses Problem zu lösen, hat TypeScript das Konzept der Generika eingeführt. Wenn Sie Generika verwenden, müssen Sie den spezifischen Typ nicht im Voraus angeben, wenn Sie Funktionen, Schnittstellen oder Klassen definieren. Stattdessen können Sie den Typ bei der Verwendung angeben. Der Zweck besteht darin, unseren Code in größerem Umfang wiederzuverwenden.

1. Einfach zu bedienen

Jetzt müssen wir eine join -Funktion definieren, die hauptsächlich zwei Werte desselben Typs akzeptiert und den verknüpften Wert der beiden Parameter zurückgibt. Der Beispielcode lautet wie folgt:

// Die sogenannten Generics sind im allgemeineren Sinne Typen, auf die allgemein verwiesen wird. // Definieren Sie eine Join-Funktion, die zwei Parameter desselben Typs akzeptiert und den verketteten Wert zurückgibt.
Funktion join<T>(erster: T, zweiter: T) {
  gibt `${first}${second}` zurück
}
// Hier wird T als Zeichenfolgentyp angegebenjoin<string>('string', 'string') //string// Hier leitet der Compiler durch Typinferenz automatisch den Typ basierend auf den übergebenen Parametern abjoin(1, 2) // 12

Generika werden mit spitzen Klammern <> definiert. Wenn wir die Join-Funktion definieren, wissen wir nicht, welche Typen akzeptiert werden können, aber wir können sicher sein, dass die beiden Typen gleich sein müssen. Wenn wir eine solche Anforderung erfüllen möchten, ist es nicht so einfach, sie ohne Generika zu lösen.

Beim Aufrufen einer Funktion gibt es zwei Möglichkeiten, diese zu verwenden. Eine besteht darin, den Typ direkt als Zeichenfolgentyp anzugeben; die andere besteht darin, die Typinferenz zu verwenden. Der Editor hilft uns automatisch dabei, den Typ basierend auf den übergebenen Parametern zu bestimmen.

2. Verwenden von Generika in Funktionen

Beim Definieren einer Funktion können wir mehrere Generika verwenden, und der Rückgabewerttyp kann auch durch Generika angegeben werden, solange die Menge und die Verwendungsmethoden übereinstimmen.

Der Beispielcode lautet wie folgt :

Funktion Identität<T, Y, P>(erste: T, zweite: Y, dritte: P): Y {
  zweite Rückkehr
}
//Angegebener Typ identity<boolean, string, number>(true, 'string', 123) // string // Typinferenz identity('string', 123, true) // true

3. Verwenden von Generika in Klassen

Wir können Generika nicht nur in Funktionen, sondern auch in Klassen verwenden.

Der Beispielcode lautet wie folgt:

Klasse DataManager<T> {
  //Definiere eine Klasse mit einem privaten Array vom Typ T constructor(private data: T[]) {}
  // Hole den Wert im Array basierend auf dem Index getItem(index: number): T {
    gib diese Daten zurück[index]
  }
}
const data = neuer DataManager(['Neuer DataManager'])
data.getItem(0) // Eine Schüssel Zhou

Darüber hinaus können Generika auch von einer Schnittstelle erben. Der Beispielcode lautet wie folgt:

Schnittstelle Element {
  Name: Zeichenfolge
}
Klasse DataManager<T erweitert Item> {
  //Definiere eine Klasse mit einem privaten Array vom Typ T constructor(private data: T[]) {}
  // Den Wert im Array basierend auf dem Index abrufen getItem(index: number): string {
    gib dies zurück.Daten[Index].Name
  }
}
const data = neuer DataManager([{ name: 'Datenmanager' }])
data.getItem(0) // Eine Schüssel Zhou

Verwenden Sie extends , um den Effekt einer generischen Einschränkung zu erzielen. Für den obigen Code müssen wir den übergebenen Wert auf ein Namensattribut beschränken, da sonst eine Ausnahme ausgelöst wird.

4. Verwenden von Typparametern in generischen Einschränkungen

Angenommen, es gibt die folgende Anforderung: Wir definieren eine Klasse mit einem privaten Objekt darin, das einige Eigenschaften enthält; dann definieren wir eine Methode, um den entsprechenden Wert über den Schlüssel zu erhalten.

Der Implementierungscode lautet wie folgt:

// Definieren Sie eine Schnittstelle Schnittstelle Person {
  Name: Zeichenfolge
  Alter: Anzahl
  Hobby: Schnur
}
//Definiere eine Klasse class Me {
  Konstruktor (private Informationen: Person) {}
  getInfo(Schlüssel: Zeichenfolge) {
    gib this.info[Schlüssel] zurück
  }
}
const ich = neues Ich({
  Name: 'Eine Schale Zhou',
  Alter: 18,
  Hobby: 'Programmieren',
})
// Der Aufruf von me.getInfo() kann zu einem undefinierten Wert führen. Beispiel: me.getInfo('myName') // undefiniert

Wenn wir im obigen Code die Methode getInfo() im Instanzobjekt aufrufen und eine nicht vorhandene Eigenschaft übergeben, erhalten wir „undefined“. Es entspricht nicht dem Stil von TypeScript , eine Methode aufzurufen, die undefined zurückgibt.

Dieses Problem kann durch den Keyof-Operator gelöst werden, mit dem alle Schlüssel eines bestimmten Typs abgerufen werden können und dessen Rückgabetyp ein Union-Typ ist.

Der Beispielcode lautet wie folgt:

Typ myPerson = Schlüssel von Person // 'Name' | 'Alter' | 'Hobby'

Jetzt können wir diesen Operator verwenden, um das obige Problem zu lösen.

Der Beispielcode lautet wie folgt:

Klasse Ich {
  Konstruktor (private Informationen: Person) {}
  // Das ist dasselbe wie getInfo<T extends keyof Person>(key: T): Person[T] {
    gib this.info[Schlüssel] zurück
  }
  // getInfo<T extends 'name' | 'alter' | 'hobby'>(schlüssel: T): Person[T] {
  // gib this.info[Schlüssel] zurück
  // }
}
const ich = neues Ich({
  Name: 'Eine Schale Zhou',
  Alter: 18,
  Hobby: 'Programmieren',
})
// Der Aufruf von me.getInfo() führt zu einem Kompilierungsfehler, wenn eine unbekannte Eigenschaft übergeben wird. me.getInfo('myName') // Fehler: Argument vom Typ ‚"myName"‘ kann nicht dem Parameter vom Typ ‚keyof Person‘ zugewiesen werden.

Wenn wir jetzt auf eine Eigenschaft zugreifen, die im Objekt nicht vorhanden ist, tritt bei der Kompilierung ein Fehler auf.

Dies ist das Ende dieses Artikels über die Verwendung von TypeScript-Generika. Weitere verwandte Inhalte zu TypeScript-Generika finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!