TypeScript — Generics

Rambabu Padimi
3 min readAug 20, 2020

Generics :

In programming building components that not only have well-defined and consistent APIs, but also reusable. Using generics we can create reusable component that supports variety of types rather than single one.

For example let’s take one function that should accepts input as all types

function result(input: any) : any 
{
return input;
}

Above function input takes as all types of values but we do not know what exactly the return value, for example if we pass number as input then we do not know the return value.

To solve this typescript uses new type variable, a special kind of variable that works on types rather than values

function result<T>(input: T) : T 
{
return input;
}

Above function <T> specifies type variable and also it specifies the arguments type and return type values. (we can give any type name like S, U etc..)

Now you can pass string as input and expect string as return value.

const response: string = result<string>('welcome');
const response: number = result<number>(125);

Mutliple type variables:

we can give multiple type variables with different names like below

function print<T,U>(input1: T, input2: U) 
{
console.log(input1+" - "+input2);
}
print<string, number>("john",3456);
print<string, string>("john","milton")

Generic Function:

In function declaration generics are defined after function name as <T> and we can also give type<T> to input parameters and return types. whenever you pass <T>as string automatically input and return type also will take as string.
Below example we defined merge function has two type parameters <T,K>. If we pass <object,number> input1 parameter will take object and input2 parameter will take number and if we pass <object,object> input1 parameter will take object and input2 parameter also will take object.

Generic function

Generic function with constraints:

We can give restriction to function parameter types. if we want to restrict to type objects, In below example function parameter type (T) extends object, It means it will take only objects as parameter, if we pass any string or number it will give error.

Generic function with constraints

Generic classes :

Generic classes have a generic type parameter list in angle brackets (<>) following the name of the class. Generic class can have generic properties and behaviours (methods). Check below example Store is generic class we can create object with argument type of number, string or objects etc.

Generic class

Generic class with constraints:

In above generic class accepts all types like number, string, boolean and object etc..we can restrict type like only primitive types number, string etc, or restrict to objects. For example by using extends keywords we can restrict type to number and string. If you pass an object it will give an error.

Generic class with constraints

Using type parameters in generic constraints:

Let’s take an object, from object will access value using keys. sometimes there is possibility to send wrong keys to access value. To solve this we can declare type parameter that is constraint by another type parameter.

Below example we defined two types <T, K> and <K> must be key of <T> object. In getName function we will pass object and key as parameters. we can pass object as data and key as name, age or gender. if we give any wrong key it will show error.

Thanks for reading

--

--