Union and Intersection Types

Learning objectives#

• Write union types with |
• Combine types with &
• Model states with discriminated unions
• Know which members you can use on a union

Explanation#

A union A | B means “either an A or a B”. let id: string | number accepts both.

On a union you can only use what all members have in common. To use string-only methods, first check typeof id === "string" (narrowing).

An intersection A & B means “both A and B at once” — an object with all properties of both.

Discriminated unions: give each member a common literal property (often status or kind). Checking it tells TypeScript exactly which member you have.

Syntax#

1type ID = string | number;
2type Timestamped = { createdAt: Date };
3type Post = { title: string } & Timestamped;

Code example: Request states as a discriminated union#

1type ID = string | number;
2

3function formatId(id: ID): string {
4  // id.toUpperCase();              // ✗ Property 'toUpperCase' does not exist on type 'number'
5  return typeof id === 'string' ? id.toUpperCase() : id.toString().padStart(5, '0');
6}
7

8type HasId = { id: number };
9type HasTimestamps = { createdAt: Date; updatedAt: Date };
10type Order = HasId & HasTimestamps & { total: number };
11

12type RequestState<T> =
13  | { status: 'loading' }
14  | { status: 'success'; data: T }
15  | { status: 'error'; message: string };
16

17function render(state: RequestState<Order[]>): string {
18  switch (state.status) {
19    case 'loading':
20      return 'Loading…';
21    case 'success':
22      return `${state.data.length} orders`;   // data exists here
23    case 'error':
24      return `Failed: ${state.message}`;       // message exists here
25  }
26}
27

28console.log(formatId('ab12'), formatId(42));
29console.log(render({ status: 'error', message: 'Timeout' }));

AB12 00042
Failed: Timeout

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. ID can be a string or a number; calling a string method directly is rejected.
2. typeof narrows id to string or number in each branch.
3. Order is an intersection: it has id, timestamps and total.
4. RequestState has three members, each with a different status literal.
5. Inside each case, TypeScript knows which properties exist.

Real-world use case#

Common mistakes#

Best practices#

• Model mutually exclusive states with discriminated unions
• Use a literal kind/status/type field as the discriminator
• Use & to compose reusable pieces (timestamps, ids)
• Handle every union member — let the compiler help (see Type Narrowing)

Remember this#

Practice exercise#

1type Payment =
2  | { method: 'card'; cardNumber: string; expiry: string }
3  | { method: 'upi'; upiId: string };
4

5function describe(p: Payment): string {
6  return p.method === 'card' ? `Card ending ${p.cardNumber.slice(-4)}` : `UPI ${p.upiId}`;
7}

Mini quiz#

Want more? Practise all TypeScript MCQs · TypeScript interview questions

Related topics#

My notes#

Saved in this browser.