Typescript Generics — Quick Intro
Typescript makes our life much easier. It brings OOP concepts into javascript and helps us to write better code. Among other features that Typescript offers us, there’s a less familiar one — Generic types.
What exactly are Generics types? When and why should I use it?
The problem:
The most common feature in Typescript is, well, to defined types. let us take this simple code for example:
We’ve created a function called echo that gets an argument and returns it. This function can get all types, It will work if you pass a string, a number, an object, etc… So if we want to add some Typescript we can add the type ‘any’ so the compiler knows it can get all kinds of types.
We’ve added the type ‘any’ as the argument type and as the return type of the function echo and indeed the type of the function response is ‘any’. When we look at the function we can very easily notice that if we pass a string the function will return a string and if we pass a number it will return a number and the same thing goes for all types. Since we defined the return type as ‘any’ (Or sometimes we don’t define it at all) we are losing valuable data about the type of the function result.
Typescript is here to protect us from making type errors. Let us take the trim() method that is valid only for strings as an example:
When calling the echo() method with 1 as the argument we won’t see any type error because as far as typescript concerned, ‘res’ is defined as ‘any’. But when we strictly defined the variable ‘numericValue’ as a number we will get a typescript warning “Property ‘trim’ does not exist on type ‘1’ ”
So how can we protect ourselves from these kinds of scenarios? How can we tell Typescript what exactly is the type the echo function returns?
The solution:
Generic types are made exactly for that purpose. It will let us to parametrized types. It might sound a bit odd but it works pretty much the same way as parametrized values or arguments. We will edit our function and add the Generic type to it.
We’ve added <T> right after the method name. The T is a placeholder that now can be used as the argument type and as the return type of the function. Why is it good? Have you noticed that now the argument type and the return type are both of type T? Well, Typescript is noticing it and now the compiler knows that the same type that was passed as an argument is the type that is expected to be returned from the function.
Now, If we will try to pass a numeric value to the function echo and will call trim (which works only for strings) the compiler will throw an error while if you pass a string you’ll see no errors.
By using Generic type you are gaining important data about your variables, keeping you in sync with their actual type, and letting typescript to protect you from making type-related errors.
When should you use Generics?
We’ve learned about what is a Generics and what it gives us. In real-life cases, Most times the types are known in advance so you can (and should) use them.
You should use Generic type when your function is working with a variety of types.
The example code is available in StackBlitz so you can see a live example of Generic types.
Generic types can also be used with classes. I wrote another article that covers this topic.
