Tendril

Lesson 169 of 1596

TypeScript Generics

Generics let a function work for many types while keeping type safety. The syntax looks scary and the concept is simple.

Creators · AI-Assisted Coding · ~27 min read

Print / PDF

A Function, for Any Type

A generic is a placeholder that TypeScript fills in based on how you call the function. One `identity` works for strings, numbers, and users.

Generics carry the concrete type through the function. No `any`, no casting.

typescript

function identity<T>(x: T): T { return x; } const a = identity("hi"); // T = string const b = identity(42); // T = number const c = identity({ id: 1 }); // T = { id: number } function first<T>(arr: T[]): T | the missing detail { return arr[0]; } const n = first([1, 2, 3]); // number | the missing detail

Constraints narrow the allowed types

`extends` says: T can be any type as long as it has an id string. Lets you use i.id safely.

typescript

function byId<T extends { id: string }>(items: T[], id: string): T | the missing detail { return items.find((i) => i.id === id); } type User = { id: string; name: string }; const users: User[] = [{ id: "u_1", name: "Ada" }]; const u = byId(users, "u_1"); // typed as User | the missing detail console.log(u?.name);

Key terms in this lesson

The big idea: generics carry types through reusable functions. Add constraints when you need properties, lean on built-in utility types, and stop when it stops helping.

End-of-lesson quiz

Check what stuck

6 questions · Score saves to your progress.

Tutor

Curious about “TypeScript Generics”?

Ask anything about this lesson. I’ll answer using just what you’re reading — short, friendly, grounded.

Progress saved locally in this browser. Sign in to sync across devices.

Related lessons

TypeScript Generics

A Function, for Any Type

Constraints narrow the allowed types

Curious about “TypeScript Generics”?

Keep going

TypeScript Generics

A Function, for Any Type

Constraints narrow the allowed types

Curious about “TypeScript Generics”?

Keep going