Skip to main content

Command Palette

Search for a command to run...

Generics in Typescript

I am trying to explain generics in a simplest way.

Updated
β€’3 min read
Generics in Typescript

Definition :)

A TypeScript generic can be defined as a programming feature that enables the creation of reusable components and functions capable of working with various data types without sacrificing type safety. By allowing the specification of type parameters when defining functions, classes, or interfaces, generics empower developers to write flexible and adaptable code that maintains strict type checking, enhancing code readability, maintainability, and scalability in our projects.

When To Use? πŸ€”:)

Have a look at the above screenshot, here I am trying to store a number in an array. This is the correct way, but what if after going ahead I have a requirement to do the same thing with a string or a boolean or anything else? You can solve it by writing another function according to your requirement or you will use "any" and it will work absolutely fine, but it is not a good practice to write the same code again and again and use "any" with Typescript as well. Also At this time, the generics came into the picture. let's solve this and I will explain after.

In the above example, I did the same thing but with multiple data types. Let's understand how it works.

Syntax :)

<> (angle brackets) : We pass and receive data types using these brackets.

In the above example, I am receiving the datatypes in <T>, T is not mandatory you can use anything. Following the syntax, I pass the data types inside <> as per my requirements and don't need to write extra codes.

Do you think, it is possible to work with multiple data types? Yes, we can use it. Let's see in action :)

In the above, I defined a function named sendResponse. When I have to send a response, The response might be a success or an error or whatever, according to the response I am sure that the data type has never been a constant. So I am using Generics here so that I can use data types as per my requirement.

Use Generics With Types πŸ›Ά:)

As a developer, we all are doing API calls, and we are getting the response in different Data Types as per our requirements, but most of the time structures are the same. As I create a structure for storing the responses, as we know "any" is not a good practice. So what can we do?

If we use generic and pass the data type of the data which we are going to store πŸ’‘. Let's do this πŸš€.

In the provided example, I have a structure where I need to store data against the "data" key. However, my requirements vary, so I created a generic type holder named <Data>. Now, I am storing various data types in a single structure. Initially, I store a user's details in a variable named userDetails. Subsequently, I store the details of all users in a variable named allUsers.

Conclusion 🌨️:)

That's all from my side.

Thanks for your valuable time.

I am looking forward to hearing from you if I missed something.

Happy Coding :)

More from this blog

U

Utkal Labs's Engineering blog

20 posts

Team of experienced industry experts sharing a common goal to provide optimum solutions to any problem. Let's discuss: (+1)32390 05072, (+91)93383 08255