Generics in TypeScript

Introduction

TypeScript is a powerful programming language that brings static typing to JavaScript. One of its most advanced features is generics, which allow you to create reusable components that can work with different types without sacrificing type safety. In this tutorial, we'll explore what generics are and how they can be used to make your TypeScript code more flexible and maintainable.

Concept

Generics in TypeScript provide a way to write functions, interfaces, or classes that operate on types provided as parameters. This means you can create components that work with any type, while still maintaining the benefits of static typing. Generics are denoted by angle brackets (<>) and allow you to specify one or more type parameters.

Why Use Generics?

1. Reusability: Generic functions and classes can be reused across different types, reducing code duplication.
2. Type Safety: By using generics, TypeScript ensures that the operations performed on data are type-safe.
3. Flexibility: Generics allow you to write more generic algorithms that can work with a variety of data types.

Examples

Let's dive into some practical examples to understand how generics work in TypeScript.

Generic Functions

A generic function is a function that operates on values of unknown types, and these types are provided as parameters. Here’s an example:

1function identity<T>(arg: T): T {
2return arg;
3}

In this example, T is a type parameter that represents the type of the argument passed to the function. The function returns the same type as the argument.

You can call this function with different types:

1let output = identity<string>("myString");
2console.log(output); // "myString"
3 
4output = identity<number>(42);
5console.log(output); // 42

Generic Interfaces

Interfaces can also be generic. Here’s an example of a generic interface that defines a container for items:

1interface Container<T> {
2value: T;
3}
4 
5let stringContainer: Container<string> = { value: "Hello" };
6console.log(stringContainer.value); // "Hello"
7 
8let numberContainer: Container<number> = { value: 42 };
9console.log(numberContainer.value); // 42

Generic Classes

Classes can also be generic. Here’s an example of a generic class that represents a stack data structure:

1class Stack<T> {
2private items: T[] = [];
3 
4push(item: T): void {
5  this.items.push(item);
6}
7 
8pop(): T | undefined {
9  return this.items.pop();
10}
11}
12 
13let stringStack = new Stack<string>();
14stringStack.push("Hello");
15console.log(stringStack.pop()); // "Hello"
16 
17let numberStack = new Stack<number>();
18numberStack.push(42);
19console.log(numberStack.pop()); // 42

What's Next?

In the next section, we'll explore more advanced topics such as generic constraints and how to use generics with functions that have multiple type parameters. Understanding these concepts will further enhance your ability to write robust and reusable TypeScript code.

By leveraging generics, you can create more flexible and maintainable codebases that are easier to understand and extend. Happy coding!