This content originally appeared on Bits and Pieces - Medium and was authored by Brian Ridolce
TypeScript is a popular programming language for web developers that offers several features to make web application development more efficient. One such feature is generics, which allows developers to create reusable code that can work with multiple types of data. In this article, we will explore what generics are, how they work in TypeScript and the benefits of using generics.
What are generics?
Generics are a programming language feature that allows you to create code that can work with multiple types. This means that you can write a function or a class that can accept any type of data, rather than being limited to a single type.
For example, let’s say that you have a function that adds two numbers together:
function add(a: number, b: number) {
return a + b;
}This function works great if you want to add two numbers together, but what if you want to add two strings together? You would need to write a new function that takes two strings as parameters and concatenates them:
function concatenate(a: string, b: string) {
return a + b;
}This can quickly become tedious if you have many different types of data that you want to work with. This is where generics come in. With generics, you can write a single function that can work with any type of data:
function add<T>(a: T, b: T) {
return a + b;
}Here, we have added a type parameter T to the function. This tells TypeScript that the function can work with any type of data. When we call the function, we specify the type of data that we want to use:
add<number>(2, 3); // returns 5
add<string>('hello', 'world'); // returns 'helloworld'
The <number> and <string> are called type arguments. They tell TypeScript which type of data to use for the T parameter.
How do generics work in TypeScript?
Generics in TypeScript work by allowing you to specify a type parameter when you define a function or a class. This type parameter can then be used throughout the function or class to refer to any type of data.
For example, let’s say that you have a function that takes an array of numbers and returns the sum of those numbers:
function sum(numbers: number[]) {
let total = 0;
for (const num of numbers) {
total += num;
}
return total;
}This function works great if you want to sum an array of numbers, but what if you want to sum an array of strings? You would need to write a new function that takes an array of strings as a parameter and converts each string to a number before summing them.
With generics, you can write a single function that can work with any type of data:
function sum<T extends number>(numbers: T[]) {
let total = 0;
for (const num of numbers) {
total += num;
}
return total;
}Here, we have added a type parameter T to the function, which extends the number type. This means that the function can only accept arrays of numbers or types that extend the number type.
When we call the function, we specify the type of data that we want to use:
sum([1, 2, 3]); // returns 6
sum([1, 2, '3']); // error: Argument of type '(string | number)[]' is not assignable to parameter of type '
sum<string>(['1', '2', '3'].map(Number)); // returns 6
Here, we have used the map function to convert each string to a number before passing the array to the sum function.
What are the benefits of using generics?
Generics have several benefits for developers, including:
Reusability
Generics allow you to write reusable code that can work with multiple types of data. This can save you time and effort when writing code, as you can write a single function or class that can be used in many different situations.
Note: An open-source toolchain like Bit can further enhance TypeScript code reusability by allowing developers to create and share individual components as reusable packages across different projects. This saves time and effort by avoiding the need to rewrite code for each project. You can learn more here and here.
Find out more about sharing types here:
Sharing Types Between Your Frontend and Backend Applications
Type safety
TypeScript is a strongly typed language, which means that it can catch many errors at compile time rather than at runtime. Generics can help you write more type-safe code by allowing you to specify the types of data that your functions or classes can work with.
Code readability
Generics can make your code more readable by making it clear what types of data your functions or classes can work with. This can make it easier for other developers to understand your code and use it in their own projects.
Flexibility
Generics can provide flexibility in your code by allowing you to write functions or classes that can work with any type of data. This can be especially useful when working with APIs or libraries that may return data in different formats.
Generics are a powerful tool for creating type-safe and reusable code in TypeScript. They offer several benefits to developers, including reusability, type safety, code readability, and flexibility. By mastering generics in TypeScript, developers can write more efficient and effective code that can work with different types of data.
If you loved what you read, you can buy me a cup of coffee? It’s fine if you can’t right now.
Build Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more:
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
Use Generics in TypeScript to Improve Your Code was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Brian Ridolce
Brian Ridolce | Sciencx (2023-03-02T05:12:09+00:00) Use Generics in TypeScript to Improve Your Code. Retrieved from https://www.scien.cx/2023/03/02/use-generics-in-typescript-to-improve-your-code/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.