Fundamental Generics

Generics (generic programming) are one of the most powerful features of TypeScript. They allow you to write flexible, reusable components, functions, and interfaces that can work with different data types while maintaining maximum type safety and avoiding the use of any.

Generic Functions

Think of a generic as a variable for types. Let's consider a function that returns the value passed to it as an argument:

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

The letter T (short for Type) is a placeholder for the type. When we call identity, TypeScript captures the type of the passed argument and automatically sets T to that type:

const str = identity<string>('Hello'); // T is string
const num = identity(42); // T is number (automatically inferred!)

Generic Interfaces and Aliases

Generics can also be applied to interfaces and type aliases to define generic containers or data structures:

interface Box<T> {
  content: T;
}

const stringBox: Box<string> = { content: 'TypeScript' };
const numberBox: Box<number> = { content: 42 };

Multiple Type Parameters

We can define functions or types that use multiple type variables (e.g., T and U):

function mergeObjects<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

Generic Constraints

Sometimes we want to limit the types accepted by a generic. We can use the extends keyword to add a constraint.

For example, if we want the generic type to always have a length property (like strings or arrays):

interface HasLength {
  length: number;
}

function logLength<T extends HasLength>(arg: T): void {
  console.log(arg.length); // Safe! We know arg has 'length'
}

logLength('Hello'); // Valid
logLength([1, 2, 3]); // Valid
// logLength(42); // Error: number does not have a length property!

Try it yourself

Exercise 1: Generic Identity Function

Exercise 2: Generic Box Wrapper

Exercise 3: Generic Constraint

Exercise 4: Generic Pair