Generics

Learning objectives#

• Write a generic function with a type parameter
• Constrain type parameters with extends
• Define generic interfaces such as ApiResponse<T>
• Use keyof in generic constraints

Explanation#

A type parameter, written <T>, is a placeholder for a type supplied when the function is used. TypeScript usually infers it from the arguments.

Without generics you would either duplicate code for each type or fall back to any, losing type checking.

extends adds a constraint: <T extends { id: number }> accepts any type that has a numeric id.

Syntax#

1function identity<T>(value: T): T { return value; }
2interface ApiResponse<T> { data: T; error?: string }

Code example: A typed API response and lookup helper#

1interface ApiResponse<T> {
2  data: T;
3  error?: string;
4}
5

6interface Course { id: number; title: string }
7

8function findById<T extends { id: number }>(items: T[], id: number): T | undefined {
9  return items.find(item => item.id === id);
10}
11

12function pluck<T, K extends keyof T>(items: T[], key: K): T[K][] {
13  return items.map(item => item[key]);
14}
15

16const res: ApiResponse<Course[]> = {
17  data: [{ id: 1, title: 'React' }, { id: 2, title: 'Angular' }],
18};
19

20const course = findById(res.data, 2); // Course | undefined
21const titles = pluck(res.data, 'title'); // string[]
22// pluck(res.data, 'price'); // ✗ Error: '"price"' is not assignable to '"id" | "title"'
23

24console.log(course?.title, titles);

Angular [ 'React', 'Angular' ]

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. ApiResponse<T> describes any response; ApiResponse<Course[]> fixes T to an array of courses.
2. findById accepts any array of objects with a numeric id and returns the same element type.
3. pluck uses K extends keyof T, so only real property names are allowed, and the return type T[K][] follows the chosen key.
4. Passing an unknown key is a compile-time error — the bug never reaches the browser.

Real-world use case#

Common mistakes#

Best practices#

• Let TypeScript infer type arguments where possible
• Constrain generics with extends instead of casting
• Use descriptive names (TItem, TKey) in complex signatures
• Keep generic signatures as simple as possible

Remember this#

Practice exercise#

1function last<T>(items: T[]): T | undefined {
2  return items[items.length - 1];
3}
4const n = last([1, 2, 3]);     // number | undefined
5const s = last(['a', 'b']);    // string | undefined

Mini quiz#

Want more? Practise all TypeScript MCQs · TypeScript interview questions

Related topics#

My notes#

Saved in this browser.