How to develop generic classes

Before developing the actual generic class, let's first understand the Generic class. TypeScript classes, called generics, can handle multiple types of data. It is the various parameters and is shown using angle brackets (). This represents the data type that the class will use to achieve this purpose. Type parameters can then be used in the class's properties and functions to make the class flexible and reusable with other data types.

We will do some briefings. Suppose in the example, the type parameter is represented as "T" and the attribute "value" of the simple generic class "MyGenericClass" is represented. Both "T" and "value" can be created. If this class is instantiated using an alternative type (such as "number" or "string"), the "value" property will have the appropriate type.

Since the same class can be used with multiple data types, this provides additional flexibility and reusability for your code. You can also use constraints to limit the kinds used as type parameters.

grammar

The syntax for creating a generic class in TypeScript is as follows -

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

Where "ClassName" is the name of the class and "TypeParameter" is a placeholder for the data type that the class will use.

Example 1

This example demonstrates how to use generic classes in TypeScript to create a class that can handle multiple data types. The class is defined with a type parameter T, which is used in the properties and methods of the class, allowing the class to be flexible and reusable with different types of data. The "Queue" class has a private property called "data" which is an array of type T.

This class also has three methods: "enqueue", adds the item to the end of the queue; "dequeue", removes the item from the front of the queue; "peek", returns the item in the queue. to the front of the queue without deleting it. We create two instances of the Queue class, one for numbers and another for strings. This class can handle different data types, making our code more flexible and reusable.

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

When compiled, it will generate the following JavaScript code.

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

Output

The above code will produce the following output -

1
1
2
Hello
Hello
world

Example 2

In this example, we will develop another generic class with two generic type properties. The "KeyValuePair" class has two private properties, "key" and "value", of type T and U respectively. This class also has two methods "getKey" and "getValue", which return key and value properties respectively.

This class can instantiate keys and values ​​using data types such as numbers, strings, or objects. We create two instances of the KeyValuePair class, one with strings as keys and numbers as values, and another with strings as keys and objects as values. This class can use different data types as keys and values, making our code more flexible and reusable.

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}

When compiled, it will generate the following JavaScript code.

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}

Output

The above code will produce the following output -

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

Using generic classes in TypeScript produces more flexible, reusable, and maintainable code. Additionally, TypeScript's type checking system ensures that types used in generic classes are used correctly at compile time, further improving the overall quality and safety of your code. Generic classes are a powerful feature of TypeScript that can be used to write more reliable and reusable code.

The above is the detailed content of How to develop generic classes. For more information, please follow other related articles on the PHP Chinese website!