当前位置：极客教程 > TypeScript > TypeScript 教程 > TypeScript 如何开发泛型类

TypeScript 如何开发泛型类

TypeScript 如何开发泛型类

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

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

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

语法

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

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

其中 “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())
TypeScript

编译时，它将生成以下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());
TypeScript

输出

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

1
1
2
Hello
Hello
world
TypeScript

例子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}
TypeScript

编译时，它将生成以下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}
TypeScript

输出

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

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

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

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

TypeScript 教程

登录

找回密码？

注册