So entwickeln Sie generische Klassen

Bevor wir die eigentliche generische Klasse entwickeln, wollen wir zunächst die generische Klasse verstehen. TypeScript-Klassen, sogenannte Generics, können mehrere Datentypen verarbeiten. Es sind die verschiedenen Parameter und werden in spitzen Klammern () angezeigt. Dies stellt den Datentyp dar, den die Klasse verwenden wird, um diesen Zweck zu erreichen. Typparameter können dann in den Eigenschaften und Funktionen der Klasse verwendet werden, um die Klasse flexibel und mit anderen Datentypen wiederverwendbar zu machen.

Wir werden einige Briefings durchführen. Angenommen, im Beispiel wird der Typparameter als „T“ dargestellt und das Attribut „value“ der einfachen generischen Klasse „MyGenericClass“ wird dargestellt. Es können sowohl „T“ als auch „Wert“ erstellt werden. Wenn diese Klasse mit einem alternativen Typ (z. B. „Zahl“ oder „Zeichenfolge“) instanziiert wird, hat die Eigenschaft „Wert“ den entsprechenden Typ.

Da dieselbe Klasse mit mehreren Datentypen verwendet werden kann, bietet dies zusätzliche Flexibilität und Wiederverwendbarkeit für Ihren Code. Sie können Einschränkungen auch verwenden, um die als Typparameter verwendeten Arten einzuschränken.

Grammatik

Die Syntax zum Erstellen einer generischen Klasse in TypeScript lautet wie folgt -

class ClassName<TypeParameter> {
   // class properties and methods
}

Wobei „ClassName“ der Name der Klasse und „TypeParameter“ ein Platzhalter für den Datentyp ist, den die Klasse verwenden wird.

Beispiel 1

Dieses Beispiel zeigt, wie generische Klassen in TypeScript verwendet werden, um eine Klasse zu erstellen, die mehrere Datentypen verarbeiten kann. Die Klasse wird mit einem Typparameter T definiert, der in den Eigenschaften und Methoden der Klasse verwendet wird, wodurch die Klasse flexibel und mit verschiedenen Datentypen wiederverwendbar ist. Die Klasse „Queue“ verfügt über eine private Eigenschaft namens „data“, bei der es sich um ein Array vom Typ T handelt.

Diese Klasse verfügt außerdem über drei Methoden: „enqueue“, wodurch das Element am Ende der Warteschlange hinzugefügt wird; „dequeue“, wodurch das Element vom Anfang der Warteschlange entfernt wird; und „peek“, wodurch das Element in die Warteschlange zurückgeführt wird . an den Anfang der Warteschlange verschieben, ohne sie zu löschen. Wir erstellen zwei Instanzen der Queue-Klasse, eine für Zahlen und eine andere für Zeichenfolgen. Diese Klasse kann verschiedene Datentypen verarbeiten, wodurch unser Code flexibler und wiederverwendbar wird.

class Queue<T> {
   private data: T[] = []

   // add an item to the end of the queue
   enqueue(item: T) {
      this.data.push(item)
   }

   // remove an item from the front of the queue
   dequeue(): T | undefined {
      return this.data.shift()
   }

   // get the item at the front of the queue
   peek(): T | undefined {
      return this.data[0]
   }
}
let numberQueue = new Queue<number>()
numberQueue.enqueue(1)
numberQueue.enqueue(2)
console.log(numberQueue.peek())
console.log(numberQueue.dequeue())
console.log(numberQueue.peek())

let stringQueue = new Queue<string>()
stringQueue.enqueue('Hello')
stringQueue.enqueue('world')
console.log(stringQueue.peek())
console.log(stringQueue.dequeue())
console.log(stringQueue.peek())

Beim Kompilieren wird der folgende JavaScript-Code generiert.

var Queue = /** @class */ (function () {
   function Queue() {
      this.data = [];
   }
   // add an item to the end of the queue
   Queue.prototype.enqueue = function (item) {
      this.data.push(item);
   };
   // remove an item from the front of the queue
   Queue.prototype.dequeue = function () {
      return this.data.shift();
   };
   // get the item at the front of the queue
   Queue.prototype.peek = function () {
      return this.data[0];
   };
   return Queue;
}());
var numberQueue = new Queue();
numberQueue.enqueue(1);
numberQueue.enqueue(2);
console.log(numberQueue.peek());
console.log(numberQueue.dequeue());
console.log(numberQueue.peek());
var stringQueue = new Queue();
stringQueue.enqueue('Hello');
stringQueue.enqueue('world');
console.log(stringQueue.peek());
console.log(stringQueue.dequeue());
console.log(stringQueue.peek());

Ausgabe

Der obige Code erzeugt die folgende Ausgabe -

1
1
2
Hello
Hello
world

Beispiel 2

In diesem Beispiel entwickeln wir eine weitere generische Klasse mit zwei generischen Typeigenschaften. Die Klasse „KeyValuePair“ verfügt über zwei private Eigenschaften, „key“ und „value“, vom Typ T bzw. U. Diese Klasse verfügt außerdem über zwei Methoden „getKey“ und „getValue“, die Schlüssel- bzw. Werteigenschaften zurückgeben.

Diese Klasse kann Schlüssel und Werte mithilfe von Datentypen wie Zahlen, Zeichenfolgen oder Objekten instanziieren. Wir erstellen zwei Instanzen der KeyValuePair-Klasse, eine mit Zeichenfolgen als Schlüssel und Zahlen als Werte und eine andere mit Zeichenfolgen als Schlüssel und Objekten als Werten. Diese Klasse kann verschiedene Datentypen als Schlüssel und Werte verwenden, wodurch unser Code flexibler und wiederverwendbar wird.

class KeyValuePair<T, U> {
   private key: T
   private value: U

   constructor(key: T, value: U) {
      this.key = key
      this.value = value
   }

   // method to get the key
   getKey(): T {
      return this.key
   }

   // method to get the value
   getValue(): U {
      return this.value
   }
}

let numberKeyValuePair = new KeyValuePair<string, number>('age', 20)
console.log(numberKeyValuePair.getKey()) // "age"
console.log(numberKeyValuePair.getValue()) // 20

let objectKeyValuePair = new KeyValuePair<string, object>('person', {
   name: 'Tutorialspoint',
   age: 10,
})
console.log(objectKeyValuePair.getKey()) // "person"
console.log(objectKeyValuePair.getValue()) // {name: "Tutorialspoint", age: 10}

Beim Kompilieren wird der folgende JavaScript-Code generiert.

var KeyValuePair = /** @class */ (function () {
   function KeyValuePair(key, value) {
      this.key = key;
      this.value = value;
   }
   // method to get the key
   KeyValuePair.prototype.getKey = function () {
      return this.key;
   };
   // method to get the value
   KeyValuePair.prototype.getValue = function () {
      return this.value;
   };
   return KeyValuePair;
}());
var numberKeyValuePair = new KeyValuePair('age', 20);
console.log(numberKeyValuePair.getKey()); // "age"
console.log(numberKeyValuePair.getValue()); // 20
var objectKeyValuePair = new KeyValuePair('person', {
   name: 'Tutorialspoint',
   age: 10
});
console.log(objectKeyValuePair.getKey()); // "person"
console.log(objectKeyValuePair.getValue()); // {name: "Tutorialspoint", age: 10}

Ausgabe

Der obige Code erzeugt die folgende Ausgabe -

age
20
person
{ name: 'Tutorialspoint', age: 10 }

Durch die Verwendung generischer Klassen in TypeScript entsteht flexiblerer, wiederverwendbarer und wartbarer Code. Darüber hinaus stellt das Typprüfungssystem von TypeScript sicher, dass in generischen Klassen verwendete Typen zur Kompilierungszeit korrekt verwendet werden, wodurch die Gesamtqualität und Sicherheit Ihres Codes weiter verbessert wird. Generische Klassen sind eine leistungsstarke Funktion von TypeScript, mit der sich zuverlässigerer und wiederverwendbarer Code schreiben lässt.

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie generische Klassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!