Updated April 12, 2023
Definition of TypeScript Generic
Generic in TypeScript is common as the Generic we have in another programming language, generic increases the reusability of the code while programming. By the use of Generic, we can return or provide any type of input to the component. This makes the code re-usable for any type of input we pass. Generic can be implemented for several types of components like interface, class, function, etc. In the coming section, we will discuss more generic to get a better understanding of them in TypeScript.
Syntax:
As we know that generic makes the component unable for various types o input, also we can have a generic interface, generic class, generic function in TypeScript, but all of these have some different syntax. Let’s see each of one syntax to get a better understanding ;
1) Generic Interface :
Syntax :
interface interface_name<T, V> {
// logic goes here ..
}2) Generic Class :
syntax :
class class_name<T> {
// logic goes here ..
}3) Generic Function :
Syntax :
function function_name<T, V(parma1: T, param1: V): T {
// logic goes here ..
}We can define generic in the above components in TypeScript, by which we can easily use them anywhere in the application with any type of return type and input param. In the coming section, we will see a practice example for each of them to understand the syntax in detail.
How does generic work in TypeScript?
As of now we already know that generic is used to make the code re-usable and by the use of them we do not need to worry about the type of param we pass because it provides us the feature to pass any kind of input param to the component. By the use of generic, we can define generic class, generic interface, generic function in TypeScript. Without generic, we have to maintain so many methods which return a different type of input as the result, but the logic inside them is nearly the same. We can have one sample example of which return the only number as result see below for better understanding;
e.g. :
function demo(num: number): number{
// we can return number only from here
}In the above lines of code as you can see we are accepting the only number and return the only number, so this method is specific to number type of input only, But what if we want to return any type of response from the method, For this we have ‘any’ keyword in TypeScript which allows handling this type of scenarios but it also has some limitation. Let’s take one sample example for better understanding see below;
e.g. :
function demo(myvalue: any): any{
// we can return number only from here
}As you can see in the above lines of code we are making the type of the method as any also it is accepting any type as the input param. By the use of this method, we can return anything we want but it also has a limitation with it. This method will not have any identity to show what it actually returns. Then in this case generic comes into the picture. We can have a look;
1) Generic function in TypeScript : We can make a function generic by using <> brackets. Inside these brackets, we pass our type. This is the basic rule to define generics in TypeScript or in any other programming language.
e.g.:
function demo1<T>(param: T): T {
return param;
}In the above code, we are making the type as ‘T’ here using the <> brackets. After this, we are returning the result as the param type.
2) generic class in TypeScript: We can also make a class generic in TypeScript. By making any class generic we can use the while class or component anywhere in the application. To define a class generic, we used the same concept <> brackets.
e.g. :
class Demo<T> {
// logic here
}In the above lines of code, we are making the class as generic in TypeScript, but the syntax is quite similar with function declaration as generic in TypeScript. We have used <> brackets to make it generic and reusable.
3) generic interface in TypeScript: We can also make the interface generic in TypeScript, by following the same syntax using the <> brackets contain the type ‘T’. Below we can have look to its declaration in TypeScript.
e.g. :
interface Identities<T, V> {
//
}In the above lines of code we are using the type variable as ‘T’ and ‘V’ there is no restriction to use only ‘T’ but it is a standard to follow. ‘T’ stands for type in generic in any programming language.
points or remember while working with generics in Typescript;
- Generic make the component re-usable in typescript.
- We can give any name to the type parameter it is not mandatory to give the ‘T’ as the name.
Example
1) In this example we are implementing generic in Typescript and trying to pass several types of param inside the same function. It will calculate the value and return us the result accordingly. This is a sample program for beginners to understand it better.
Code:
export class Demo{
constructor() {
}
testFunction<T>(param : T): T {
console.log("I am generic function (calling) !!");
console.log( "value is::" + param);
return param;
}
}
console.log("Demo to show generics in Typescript. !!!");
let demo = new Demo();
let result1= demo.testFunction("Hello I am string");
let result2= demo.testFunction(1000);
let result3= demo.testFunction(20.45);
let result4= demo.testFunction('Z');
let result5= demo.testFunction(30);
console.log("printing result from the generic function !!");
console.log(result1);
console.log(result2);
console.log(result3);
console.log(result4);
console.log(result5);Output:
Conclusion
By the use of generic in TypeScript we can make our class, interface, and function reusable throughout the application. We just need to follow its syntax on how to use this, it is very easy to use, also reduces the duplicate code from our application. easy to understand and readable as well.
Recommended Articles
We hope that this EDUCBA information on “TypeScript Generic” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
