tryjs.app

TypeScript Generics — Type-Safe Functions and Constraints

Learn TypeScript generics with runnable examples. Generic functions, type constraints, default type parameters, and type-safe container patterns.

function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

console.log(first([1, 2, 3]));        // inferred T = number
console.log(first(["a", "b", "c"]));  // inferred T = string

// Generic with constraint
function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b;
}

console.log(longest("hello", "hi"));
console.log(longest([1, 2, 3], [4, 5]));

// Multiple parameters
function pair<A, B>(a: A, b: B): [A, B] {
  return [a, b];
}
const p = pair("answer", 42); // [string, number]
console.log(p);

// Default type parameter
function wrap<T = string>(value: T): { value: T } {
  return { value };
}
console.log(wrap("hi"));
console.log(wrap<number>(42));

Run in Playground All Snippets

Overview

Generics let you write functions and types that work with any type while preserving that type information through the call. Instead of falling back to any (which loses type safety), you introduce a type parameter that gets inferred or supplied at the call site. The result: one implementation that's reusable across types, and the compiler still catches mismatches.

How It Works

Type parameters in angle brackets

function first<T>(arr: T[]): T | undefined — T is a placeholder. When you call first([1, 2, 3]), TypeScript infers T = number, so the return type is number | undefined.

Constraints with extends

<T extends { length: number }> means 'any type that has a length property'. The constraint limits which types can be used as T and gives you access to its members inside the function.

Default type parameters

<T = string> provides a fallback when the caller doesn't supply or infer a type. Useful for utility types and optional positions.

Multiple parameters and inference

function map<T, U>(arr: T[], fn: (x: T) => U): U[] — two parameters inferred from the input array and the function's return type. The caller usually never has to supply them manually.

Common Mistakes

Overusing generics when a plain type would do — <T> only earns its keep when the caller needs to preserve the type.
Missing a constraint and then trying to use a property inside the function — T has no methods unless you extend it.
Writing function foo<T>(x: any): T — the any defeats the point, and T isn't tied to anything.
Returning a union T | U when one of them should be a constraint instead.

When to Use It

Use generics whenever a function or data structure should be reusable across types without losing type information. Collections (Stack<T>, Queue<T>), utility functions (first, last, groupBy), and wrapper types (Result<T>, Maybe<T>) all benefit.

Frequently Asked Questions

What are generics in TypeScript?

Generics are type parameters that let a function or type work with any type while preserving the specific type at the call site. Instead of returning any, you return T — whatever T was at the call.

What is a generic constraint?

A constraint restricts what types are allowed for a type parameter. <T extends { length: number }> means T must have a length property, which lets you read that property inside the function with type safety.

Do I need to specify generic types when calling a function?

Usually no — TypeScript infers them from the arguments. You only need to specify them when inference can't figure it out, or when you want to override the inferred type.

When should I use a generic instead of a union type?

Use a generic when the caller's specific type should flow through to the return value. Use a union when a fixed set of known types is acceptable and you don't need call-site-specific typing.

Generics

Overview

How It Works

Type parameters in angle brackets

Constraints with extends

Default type parameters

Multiple parameters and inference

Common Mistakes

When to Use It

Frequently Asked Questions

What are generics in TypeScript?

What is a generic constraint?

Do I need to specify generic types when calling a function?

When should I use a generic instead of a union type?

More Snippets

Type Guards

Utility Types

Discriminated Unions

Map, Filter, Reduce

Destructuring

Spread & Rest