Javatpoint Logo
Javatpoint Logo

TypeScript Generics

TypeScript Generics is a tool which provides a way to create reusable components. It is able to create components that can work with a variety of data types rather than a single data type. It allows users to consume these components and use their own types. Generics ensures that the program is flexible as well as scalable in the long term.

Generics provides type safety without compromising the performance, or productivity. TypeScript uses generics with the type variable that denotes types. The type of generic functions is just like non-generic functions, with the type parameters listed first, similarly to function declarations.

In generics, a type parameter is written between the open (<) and close (>) brackets which makes it strongly typed collections. Generics use a special kind of type variable <T> that denotes types. The generics collections contain only similar types of objects.

In TypeScript, we can create generic classes, generic functions, generic methods, and generic interfaces. TypeScript Generics is almost similar to C# and Java generics.


The corresponding JavaScript file is given below.



Advantage of Generics

There are mainly three advantages of generics. They are as follows:

  1. Type-safety: We can hold only a single type of objects in generics. It doesn't allow to store other objects.
  2. Typecasting is not required: There is no need to typecast the object.
  3. Compile-Time Checking: It is checked at compile time so the problem will not occur at runtime.

Why need Generics?

We can understand the need of generics by using the following example.


[ 10, 20, 30, 40, 'Hello TypeScript' ]
[ 'Hello', 'JavaTpoint', 'Hello SSSIT', 40 ]

In the above example, the getItems() function accepts an array which is of type any. This function creates a new array of type any, concatenates items to it and returns this new array. Since we have used any datatype, we can pass any type of items to the function. But, this may not be the correct way to add items. We have to add numbers to number array and the strings to the string array, but we do not want to add numbers to the string array or vice-versa.

To solve this, TypeScript introduced generics. In generics, the type variable only accepts the particular type that the user provides at declaration time. This is preserving the type checking information.

The above function rewritten as a generic function is given below.


[ 10, 20, 30, 40, 'Hi! Javatpoint' ]
[ 'Hello', 'JavaTpoint', 'Hello TypeScript', 50 ]

In the above example, the type variable T is specified with the function in the angle brackets getItems<T>. This variable also specifies the type of the arguments and the return value. It ensures that data type specified at the time of a function call will also be the data type of the arguments and the return value.

The generic function getItems() accepts the numbers array and the strings array. When we call the function getItems<number>([10, 20, 30]), then it will replace T with the number. So, the type of the arguments and the return value will be number array. Similarly, for function getItems<string>(["Hello", "JavaTpoint"]), the arguments type and the return value will be string array. Now, if we try to add a string in arrNumber or a number in arrString array, the compiler will show an error. Thus, it preserves the type checking advantage.

In TypeScript, we can also call a generic function without specifying the type variable. The TypeScript compiler will set the value of T on the function based on the data type of argument values.

Multi-type variables

In TypeScript Generics, we can define multi-type variables with a different name as shown below.



DataType of Id: number
DataType of Name: string

Generic with Non-generic Type

We can also use generic types with other non-generic types.



DataType of Id: number
DataType of Name: string

Generics Classes

TypeScript also supports generic classes. The generic type parameter is specified in angle brackets (<>) following the name of the class. A generic class can have generic fields or methods.



Id = 101, Name = Virat
Id = 201, Name = Rohit

Generics Interface

The generic type can also be used with the interface. We can understand the generic interface with the following example.



Name: Rohit Sharma 
Age: 30 
Profession: Cricket Player

Generics Interface as Function Type

We can also use generics interface as function types. The following example can understand it.



Id = 11, 
Name = Rohit Sharma

Generic Constraints

As we know the TypeScript Generics Types allows to work with any and all data type. However, we can restrict it to certain types by using constraints. In the following example, we will create an interface that has a single .length property. We will use this interface, and the extends keyword to denote our constraint:



Length: 10
Length: undefined

Generic Constraints with class

A more advanced example of Generic constraints relationships between the constructor function and the instance side of class types is given below.



Virat Kohli
Next TopicTypeScript Module

Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA