How do you combine multiple types?

TypeScriptJunior~1 min read

1. Combining types with `|` (Union Type)

A union means: a value can be one of several types.

Example 1: basic types

javascript

type ID = string | number;

let userId: ID;

userId = 42;      // number
userId = "abc123"; // string
userId = true;     // Error

userId can be either string or number, but nothing else.

Example 2: several structures

javascript

type Admin = { role: "admin"; permissions: string[] };
type User = { role: "user"; name: string };

type Person = Admin | User;

const p1: Person = { role: "admin", permissions: ["delete", "edit"] }; // fine
const p2: Person = { role: "user", name: "Tim" };                       // fine

TypeScript will make sure the object matches at least one of the shapes.

How to distinguish types inside a union

You can use type narrowing:

javascript

function printRole(person: Person) {
  if (person.role === "admin") {
    console.log(person.permissions); // TS understands this is Admin
  } else {
    console.log(person.name); // TS understands this is User
  }
}

2. Combining types with `&` (Intersection Type)

An intersection merges all fields from several types. An object must match all the combined types at once.

Example 1: combining structures

javascript

type Person = { name: string };
type Contact = { email: string };

type User = Person & Contact;

const u: User = { name: "Tim", email: "tim@example.com" }; // both fields are required

Here User includes properties from both types: name and email.

Example 2: combining several interfaces and types

javascript

interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

type Identifiable = { id: number };

type Entity = Timestamped & Identifiable;

const e: Entity = {
  id: 1,
  createdAt: new Date(),
  updatedAt: new Date(),
};

Entity is now a "merge" of two structures.

Example of an incompatible intersection

javascript

type A = { value: string };
type B = { value: number };

type C = A & B; // value must be both string and number at once -> never

const c: C = { value: "test" }; // Error

If the fields have different types, TypeScript cannot merge them, the result is the never type (an impossible type).

3. Union + Intersection together

You can combine both approaches:

javascript

type Admin = { role: "admin"; permissions: string[] };
type User = { role: "user"; name: string };

type Person = (Admin | User) & { id: number };

Here Person must have an id field, and must also match either Admin or User.

Usage example:

javascript

const a: Person = { id: 1, role: "admin", permissions: ["delete"] };
const u: Person = { id: 2, role: "user", name: "Tim" };

4. Why combine types

Union (|) is for when data comes in different shapes (variants). Intersection (&) is for when you need to merge several structures together.

5. Real-life examples

Scenario	What to use	Example
`id` can be a string or a number	`string \| number`	`type ID = string
A user can be `Admin` or `User`	`Admin \| User`	union
An object combines fields of `User` and `Timestamped`	`User & Timestamped`	intersection
An API response can be successful or an error	`SuccessResponse \| ErrorResponse`	union
A model includes properties from several base types	`Base & Metadata & Permissions`	intersection

Summary

In TypeScript you can combine types in two ways:

A union (|) is "or" -> one of several variants An intersection (&) is "and" -> merges everything into one type

Combine them to describe complex structures:

javascript
type Person = (Admin | User) & { id: number };

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.