Comment développer des classes génériques

Avant de développer la classe générique proprement dite, commençons par comprendre la classe générique. Les classes TypeScript, appelées génériques, peuvent gérer plusieurs types de données. Il s'agit des différents paramètres et ils sont affichés à l'aide de crochets angulaires (). Cela représente le type de données que la classe utilisera pour atteindre cet objectif. Les paramètres de type peuvent ensuite être utilisés dans les propriétés et fonctions de la classe pour rendre la classe flexible et réutilisable avec d'autres types de données.

Nous ferons quelques briefings. Supposons que dans l'exemple, le paramètre de type soit représenté par "T" et que l'attribut "value" de la classe générique simple "MyGenericClass" soit représenté. "T" et "valeur" peuvent être créés. Si cette classe est instanciée à l'aide d'un type alternatif (tel que "number" ou "string"), la propriété "value" aura le type approprié.

Étant donné que la même classe peut être utilisée avec plusieurs types de données, cela offre une flexibilité et une réutilisabilité supplémentaires à votre code. Vous pouvez également utiliser des contraintes pour limiter les types utilisés comme paramètres de type.

Grammaire

La syntaxe de création d'une classe générique dans TypeScript est la suivante -

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

Où "ClassName" est le nom de la classe et "TypeParameter" est un espace réservé pour le type de données que la classe utilisera.

Exemple 1

Cet exemple montre comment utiliser des classes génériques dans TypeScript pour créer une classe capable de gérer plusieurs types de données. La classe est définie avec un paramètre de type T, qui est utilisé dans les propriétés et méthodes de la classe, permettant à la classe d'être flexible et réutilisable avec différents types de données. La classe "Queue" possède une propriété privée appelée "data" qui est un tableau de type T.

Cette classe dispose également de trois méthodes : "enqueue", qui ajoute l'élément à la fin de la file d'attente ; "dequeue", qui supprime l'élément du début de la file d'attente et "peek", qui renvoie l'élément dans la file d'attente ; . au début de la file d’attente sans le supprimer. Nous créons deux instances de la classe Queue, une pour les nombres et une autre pour les chaînes. Cette classe peut gérer différents types de données, rendant notre code plus flexible et réutilisable.

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())

Une fois compilé, il générera le code JavaScript suivant.

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());

Sortie

Le code ci-dessus produira la sortie suivante -

1
1
2
Hello
Hello
world

Exemple 2

Dans cet exemple, nous développerons une autre classe générique avec deux propriétés de type générique. La classe "KeyValuePair" possède deux propriétés privées, "key" et "value", de type T et U respectivement. Cette classe possède également deux méthodes "getKey" et "getValue", qui renvoient respectivement les propriétés clé et valeur.

Cette classe peut instancier des clés et des valeurs à l'aide de types de données tels que des nombres, des chaînes ou des objets. Nous créons deux instances de la classe KeyValuePair, une avec des chaînes comme clés et des nombres comme valeurs, et une autre avec des chaînes comme clés et des objets comme valeurs. Cette classe peut utiliser différents types de données comme clés et valeurs, rendant notre code plus flexible et réutilisable.

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}

Une fois compilé, il générera le code JavaScript suivant.

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}

Sortie

Le code ci-dessus produira la sortie suivante -

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

L'utilisation de classes génériques dans TypeScript produit un code plus flexible, réutilisable et maintenable. De plus, le système de vérification de type de TypeScript garantit que les types utilisés dans les classes génériques sont utilisés correctement au moment de la compilation, améliorant ainsi la qualité et la sécurité globales de votre code. Les classes génériques sont une fonctionnalité puissante de TypeScript qui peut être utilisée pour écrire du code plus fiable et réutilisable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!