Previous

Introduction to TypeScript Generics

Generics in TypeScript provide a powerful way to write reusable and type-safe code. They allow you to define functions, classes, and interfaces that can work with any data type while still enforcing type safety. By using generics, you can make your code more flexible and maintainable without sacrificing type safety.

 

What are Generics?

Generics are a feature in TypeScript that allows you to create components (such as functions, classes, or interfaces) that can work with multiple data types. Instead of specifying a concrete data type like string or number, you define a placeholder type that can be replaced with any type when the component is used.

Generics are denoted by angle brackets (< >) and typically involve a type parameter (usually represented as T or other identifiers).

 

Why Use Generics?

  • Reusability: Generics allow you to write functions, classes, or interfaces that can operate on various types without duplicating code.
  • Type Safety: Generics maintain the benefits of static typing while keeping your code flexible, ensuring that the types are checked at compile time.
  • Avoiding Code Duplication: With generics, you can write functions or classes that work with different types, eliminating the need to write multiple versions of the same function or class for different data types.

 

Syntax of Generics

A generic is defined by adding a type parameter inside angle brackets (<T>), where T is a placeholder for any type.

function identity<T>(value: T): T {
  return value;
}
  • <T>: This is the type parameter. T can be replaced by any type when the function is called.
  • value: T: The input parameter's type is defined by the type parameter T.
  • : T: The return type of the function is also of type T.

 

Example of Generics

1. Generic Function

Here is a simple example of a generic function that returns the same value passed into it:

function identity<T>(value: T): T {
  return value;
}

console.log(identity(42));        // Output: 42
console.log(identity("Hello"));   // Output: Hello
  • In this example, the function identity accepts a value of any type (T) and returns a value of the same type.
  • When you call identity(42), TypeScript infers that T is number.
  • When you call identity("Hello"), T is inferred as string.

2. Generic with Multiple Type Parameters

You can also define functions that work with multiple types. For instance, if you want to create a function that swaps two values:

function swap<T, U>(a: T, b: U): [U, T] {
  return [b, a];
}

const swapped = swap(1, "one");
console.log(swapped);  // Output: ["one", 1]
  • This function takes two arguments, a and b, which are of types T and U, respectively.
  • It returns a tuple where the first element is of type U and the second element is of type T.

 

Generic Classes

You can also use generics in classes. Here’s an example of a class that stores a value and has a method to return that value:

class Box<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

const numberBox = new Box(42);
console.log(numberBox.getValue()); // Output: 42

const stringBox = new Box("Hello");
console.log(stringBox.getValue()); // Output: Hello
  • The Box class is a generic class that accepts a type parameter T.
  • The constructor and the getValue method use this type parameter to define the type of the value property.

 

Generic Interfaces

Generics can also be used in interfaces to define flexible yet type-safe structures.

interface Pair<T, U> {
  first: T;
  second: U;
}

const pair: Pair<number, string> = { first: 1, second: "one" };
console.log(pair.first);   // Output: 1
console.log(pair.second);  // Output: one
  • The Pair interface uses two type parameters, T and U, to define a pair of values with different types.
  • When creating the pair object, you specify that T is number and U is string.

 

Constraints on Generics

Sometimes, you may want to restrict the types that can be used with a generic. You can do this by using constraints. This ensures that the type passed into the generic is compatible with a specific type or interface.

function loggingIdentity<T extends { length: number }>(value: T): T {
  console.log(value.length);  // Works because T is guaranteed to have a length property
  return value;
}

loggingIdentity("Hello");  // Output: 5
loggingIdentity([1, 2, 3]);  // Output: 3
  • In this example, the type parameter T is constrained to types that have a length property (such as string or array).
  • This ensures that the length property is available on value.

 

Generic Defaults

You can provide a default type for a generic, which will be used if no type is specified when the function or class is called.

function wrapInArray<T = string>(value: T): T[] {
  return [value];
}

console.log(wrapInArray(5));      // Output: [5]
console.log(wrapInArray("Hello")); // Output: ["Hello"]
  • In this case, the default type for T is string, so if no type is provided, TypeScript will assume T is string.

 

Summary

Generics in TypeScript are a powerful feature that allows you to write reusable, flexible, and type-safe code. By using generics, you can create functions, classes, and interfaces that work with any data type while still maintaining strong typing. Generics enhance code reusability, provide better type safety, and make your code more maintainable.

  • Generic Function: A function that can work with different types while maintaining type safety.
  • Generic Classes and Interfaces: Classes and interfaces that are flexible enough to handle different types.
  • Constraints: Restrict the types that can be used with a generic, making your code more predictable.
  • Default Types: Provide default types for generics, allowing for simpler syntax while still being type-safe.

Generics are a key part of making your TypeScript code more scalable and reusable while avoiding code duplication.

Previous