TypeScript 如何开发泛型类

在开发实际的泛型类之前，让我们首先了解一下泛型类。一个被称为泛型的TypeScript类可以处理众多类型的数据。它是各种参数，使用角括号（<>）显示。这代表类将使用何种数据来实现。然后，类型参数可以在类的属性和函数中使用，使类可以灵活地与其他数据类型重复使用。

我们将简要介绍一下。假设在一个例子中，类型参数被表示为 “T”，简单的泛型类 “MyGenericClass “的属性 “value”。”T “和 “value “都可以被创建。如果这个类被实例化为其他种类，如 “数字 “或 “字符串”，那么 “值 “属性将具有适当的类型。

由于同一个类可能被用于几种数据类型，这给你的代码带来了额外的灵活性和重用性。你也可以使用约束条件来限制作为类型参数使用的种类。

语法

在TypeScript中创建一个通用类的语法如下

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

其中 “ClassName “是类的名称，”TypeParameter “是该类将处理的数据类型的占位符。

例子1

这个例子演示了在TypeScript中使用一个通用类来创建一个可以处理多种数据类型的类。该类被定义了一个类型参数T，它被用于该类的属性和方法中，使得该类可以灵活地与不同类型的数据重复使用。Queue “类有一个名为 “data “的私有属性，是一个T类型的数组。

该类也有三个方法。”enqueue”，在队列末端添加一个项目；”dequeue”，从队列前端移除一个项目；”peek”，返回队列前端的项目而不移除它。我们已经创建了两个Queue类的实例，一个用于数字，另一个用于字符串。该类可以处理不同的数据类型，使我们的代码更加灵活和可重复使用。

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

编译时，它将生成以下JavaScript代码。

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

输出

上述代码将产生以下输出 –

1
1
2
Hello
Hello
world

例子2

在这个例子中，我们将开发另一个有两个通用类型属性的通用类。KeyValuePair “类有两个私有属性，”key “和 “value”，类型分别为T和U。该类也有两个方法，”getKey “和 “getValue”，分别返回key和value属性。

该类可以用数据类型进行实例化，如数字、字符串或对象，作为key和value的数据类型。我们已经创建了两个KeyValuePair类的实例，一个以字符串为键，数字为值，另一个以字符串为键，对象为值。该类可以为键和值处理不同的数据类型，使我们的代码更加灵活和可重复使用。

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}

编译时，它将生成以下JavaScript代码。

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}

输出

上述代码将产生以下输出 –

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

在TypeScript中使用泛型类可以使代码更加灵活、可重用和可维护。此外，TypeScript的类型检查系统确保泛型类中使用的类型在编译时正确使用，进一步提高代码的整体质量和安全性。泛型类是TypeScript的一个强大功能，可以用来编写更可靠和可重用的代码。