如何开发泛型类
在开发实际的泛型类之前，让我们先了解一下泛型类。TypeScript 类称为泛型，可以处理多种类型的数据。它有多种参数，使用尖括号 (<>) 显示。这表示类将使用哪种类型的数据来实现此目的。然后可以在类的属性和函数中使用类型参数，以使类灵活并可与其他数据类型重用。
我们将简要介绍一下。假设在一个示例中，类型参数表示为"T"，属性"value"表示简单泛型类"MyGenericClass"。可以同时创建"T"和"value"。如果使用替代类型(例如"number"或"string")实例化此类，"value"属性将具有适当的类型。
由于同一个类可以与多种数据类型一起使用，因此这为您的代码提供了额外的灵活性和重用性。您还可以使用约束来限制用作类型参数的类型。
语法
在 TypeScript 中创建泛型类的语法如下 -
class ClassName<TypeParameter> {
// 类属性和方法
}
其中"ClassName"是类的名称，"TypeParameter"是该类将使用的数据类型的占位符。
示例 1
此示例演示了如何使用 TypeScript 中的泛型类来创建可以使用多种数据类型的类。该类使用类型参数 T 定义，该参数用于类的属性和方法，从而使该类能够灵活地重复使用不同类型的数据。类"Queue"具有一个名为"data"的私有属性，即 T 类型的数组。
该类还有三种方法:"enqueue"，用于将项目添加到队列末尾，"dequeue"，用于从队列前面删除项目，"peek"，返回队列前面的项目而不删除它。我们创建了 Queue 类的两个实例，一个用于数字，另一个用于字符串。该类可以使用不同的数据类型，使我们的代码更加灵活和可重用。
class Queue<T> {
private data: T[] = []
// 将一个项目添加到队列末尾
enqueue(item: T) {
this.data.push(item)
}
// 从队列前面删除一个项目
dequeue(): T | undefined {
return this.data.shift()
}
// 获取队列前面的项目
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 = [];
}
// 将项目添加到队列末尾
Queue.prototype.enqueue = function (item) {
this.data.push(item);
};
// 从队列前面删除一个项目
Queue.prototype.dequeue = function () {
return this.data.shift();
};
// 获取队列前面的项目
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"类有两个私有属性，分别为 T 和 U 类型的"key"和"value"。该类还有两个方法"getKey"和"getValue"，分别返回 key 和 value 属性。
该类可以使用数据类型(例如数字、字符串或对象)来实例化 key 和 value。我们创建了 KeyValuePair 类的两个实例，一个以字符串为键，数字为值，另一个以字符串为键，对象为值。该类可以使用不同的数据类型来处理 key 和 value，从而使我们的代码更加灵活和可重用。
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 的一项强大功能，可用于编写更可靠、可重用的代码。
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
