Generic Classes
TypeScript Generic classes allow you to create a class that can work over a variety of data types rather than a single one. It increases the scalability and reusability of the code. Let’s understand how generic classes work in TypeScript.
Syntax
You can follow the syntax below to use the generic classes in TypeScript.
classclass_name<T, U>{// Class body}let obj1 =newclass_name<data_type_1, data_type_2>();
- In the above syntax, ‘class’ is a keyword to define a class.
- ‘class_name’ is a valid identifier, representing the class name.
- ‘<T, U>’ are type parameters specified in the angular bracket. You can specify as many as you want.
- While defining the object of the class, you need to pass data types as an argument after the class name in the angular bracket.
Example
In the code below, we have defined the generic class named ‘Box’ which takes type parameter T.
In the class, we have defined the ‘val’ variable of type T, and the constructor function which initializes the value of the ‘val’ variable.
After that, we defined the getters and setters named get() and set(), respectively to get the value of the ‘val’ variable.
Next, we have defined the ‘box1’ and ‘box2’ objects of the Box class which take number and string data type as a type parameter argument, respectively.
// generic classclassBox<T>{// member variable
val:T;// constructor with valueconstructor(value:T){this.val = value;}// Method to get valueget():T{returnthis.val;}// Method to set valueset(value:T):void{this.val = value;}}// create object of Box classlet box1 =newBox<number>(10);console.log(box1.get());// 10let box2 =newBox<string>("Hello");console.log(box2.get());// Hello</code></pre>
On compiling, it will generate the following JavaScript code:
// generic classclassBox{// constructor with valueconstructor(value){this.val = value;}// Method to get valueget(){returnthis.val;}// Method to set valueset(value){this.val = value;}}// create object of Box classlet box1 =newBox(10);
console.log(box1.get());// 10let box2 =newBox("Hello");
console.log(box2.get());// Hello
Output
The output of the above code is as follows
10
Hello
Example
In the TypeScript code below:
- We have defined the 'Stack' class which takes a type parameter 'T'.
- In the class, we have defined the private variable 'st' whose type is an array of type T.
- The constructor function initializes the 'st' array.
- Push() method takes the element of type 'T' as a parameter and inserts it in the 'st' array.
- The pop() method removes the last element from the 'st' array and returns it.
- The peek() method returns the last element from the array.
- The isEmpty() method returns a boolean value based on whether the array is empty.
- The size() method returns the size of the 'st' array.
- Next, we have defined the object of the Stack class with the number data type, performed various operations using the methods of the Stack class.
// Defining the class stackclassStack<T>{// Defining the private array to store the stack elementsprivate st:T[]=[];// Constructor to initialize the stack with initial contentsconstructor(initialContents?:T[]){if(initialContents){this.st = initialContents;}}// Method to push an element to the stackpush(item:T):void{this.st.push(item);}// Method to pop an element from the stackpop():T|undefined{returnthis.st.pop();}// Method to get the top element of the stackpeek():T|undefined{returnthis.st[this.st.length -1];}// Method to check if the stack is emptyisEmpty():boolean{returnthis.st.length ===0;}// Method to get the size of the stacksize():number{returnthis.st.length;}}// Usage Exampleconst numberStack =newStack<number>();
numberStack.push(1);
numberStack.push(2);
numberStack.push(3);console.log(numberStack.peek());// Outputs: 3console.log(numberStack.pop());// Outputs: 3console.log(numberStack.peek());// Outputs: 2console.log(numberStack.isEmpty());// Outputs: falseconsole.log(numberStack.size());// Outputs: 2
On compiling, it will generate the following JavaScript code:
// Defining the class stackclassStack{// Constructor to initialize the stack with initial contentsconstructor(initialContents){// Defining the private array to store the stack elementsthis.st =[];if(initialContents){this.st = initialContents;}}// Method to push an element to the stackpush(item){this.st.push(item);}// Method to pop an element from the stackpop(){returnthis.st.pop();}// Method to get the top element of the stackpeek(){returnthis.st[this.st.length -1];}// Method to check if the stack is emptyisEmpty(){returnthis.st.length ===0;}// Method to get the size of the stacksize(){returnthis.st.length;}}// Usage Exampleconst numberStack =newStack();
numberStack.push(1);
numberStack.push(2);
numberStack.push(3);
console.log(numberStack.peek());// Outputs: 3
console.log(numberStack.pop());// Outputs: 3
console.log(numberStack.peek());// Outputs: 2
console.log(numberStack.isEmpty());// Outputs: false
console.log(numberStack.size());// Outputs: 2
Output
The output of the above code is as follows
3
3
2
false
2
Implementing Generic Interface with Generic Classes
Generic classes can also implement the generic interfaces. So, developers can use a single generic interface to implement multiple generic classes, allowing them to reuse the code.
Syntax
You can follow the syntax below to implement the generic interface with generic classes.
classclass_name<T>implementsinterface_name<T>{// Class body}
- In the above syntax, 'class class_name<T>' defines the generic class.
- 'implements' is a keyword to implement the interface with the class.
- 'interface_name<T>' is a generic interface.
Example
In the example below:
- We have defined the generic interface named 'dataBase', which defines the findById() and save() method.
- Next, we have defined the generic class named 'memorydataBase', and implemented it with the 'dataBase' interface.
- In the class, we have defined the 'items' map which stores the numeric value as a key, the value of type 'T'.
- Next, we have implemented the findById() method, which accesses the value by key from the map and returns it.
- The save() method stores the key-value pair in the 'items' map.
- In the end, we created the object of the 'MemorydataBase' class and performed various operations using this method.
// Defining a generic interfaceinterfacedataBase<T>{findById(id:number):T|undefined;save(item:T):void;}// Defining a class that implements the generic interfaceclassMemorydataBase<T>implementsdataBase<T>{// Defining a private property that is a map of itemsprivate items =newMap<number, T>();// Implementing the findById methodfindById(id:number):T|undefined{returnthis.items.get(id);}// Implementing the save methodsave(item:T):void{const id =this.items.size +1;this.items.set(id, item);}}// Creating an instance of the MemorydataBase classconst repo =newMemorydataBase<string>();
repo.save("Hello");console.log(repo.findById(1));// Outputs: Hello
On compiling, it will generate the following JavaScript code:
// Defining a class that implements the generic interfaceclassMemorydataBase{constructor(){// Defining a private property that is a map of itemsthis.items =newMap();}// Implementing the findById methodfindById(id){returnthis.items.get(id);}// Implementing the save methodsave(item){const id =this.items.size +1;this.items.set(id, item);}}// Creating an instance of the MemorydataBase classconst repo =newMemorydataBase();
repo.save("Hello");
console.log(repo.findById(1));// Outputs: Hello
Output
The output of the above code is as follows
Hello
You may use the 'extends' keyword to use the various constraints with the generic classes. It's always a good idea to use generic parameters, constraints, interfaces, and classes in your code to make it scalable and reusable.