PricingLoginStart free
TypeScript Academy · Lesson

Union Types: A or B

Use | to allow multiple type possibilities.

Lesson 1 of 413 steps

Union Types: A or B is a free TypeScript Academy lesson on CoddyKit. This is lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The TypeScript Academy course includes 4 lessons in total.

Welcome

Union types allow a value to be one of several types. They are written with the `|` operator and are fundamental to modeling real-world data.

Basic Union Syntax

Combine two or more types with `|`. A variable with a union type can hold any one of the listed types.
let id: string | number;
id = 'abc123'; // OK
id = 42;       // OK
// id = true;  // Error

Union in Function Parameters

Accept multiple input types in a function using a union parameter type.
function format(val: string | number): string {
  return typeof val === 'string' ? val.toUpperCase() : val.toFixed(2);
}

Narrowing Required for Union Members

You can only call methods common to all union members without narrowing. For type-specific methods, you must narrow first.
function process(val: string | number) {
  // val.toFixed(2); // Error — not on string
  if (typeof val === 'number') {
    val.toFixed(2); // OK
  }
}

Union with Literal Types

Union types of literal values create an enum-like set of allowed string or number values.
type Direction = 'north' | 'south' | 'east' | 'west';
type StatusCode = 200 | 201 | 400 | 404 | 500;

Union for Nullable Types

The most common union is `T | null` or `T | undefined` to represent optional values when strictNullChecks is on.
function getUser(id: number): User | null {
  return db.find(u => u.id === id) ?? null;
}

Union of Object Types

Union types can combine object types. TypeScript only allows access to properties common to all members without narrowing.
type Cat = { kind: 'cat'; meow(): void };
type Dog = { kind: 'dog'; bark(): void };
type Pet = Cat | Dog;
function speak(pet: Pet) {
  if (pet.kind === 'cat') pet.meow();
  else pet.bark();
}

Three or More Types in a Union

Union types can include as many types as needed.
type Input = string | number | boolean | null;

Union in Return Types

Functions can return different types depending on their logic. Express this with a union return type.
function divide(a: number, b: number): number | null {
  if (b === 0) return null;
  return a / b;
}

Discriminated Unions

Add a shared literal property (a discriminant) to union members. TypeScript uses this to narrow the type automatically.
type Square = { kind: 'square'; side: number };
type Circle = { kind: 'circle'; radius: number };
type Shape = Square | Circle;

Common Properties Without Narrowing

If all union members share a property, you can access it without narrowing.
type A = { name: string; x: number };
type B = { name: string; y: number };
type AB = A | B;
function getName(obj: AB): string {
  return obj.name; // OK — name is on both
}

Quick Check

What syntax creates a union type that can be either a string or number?
Answer it in the interactive lesson

Recap

Union types (|) allow values of multiple types. Narrow unions before using type-specific operations. Literal union types restrict values to a finite set. Discriminated unions add a shared tag for easier narrowing.
Free to start

Learn TypeScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
101
Lessons
352
Start learning freeView the full course

Frequently Asked Questions

Is the “Union Types: A or B” lesson free?

Yes — the full text of “Union Types: A or B” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO. The TypeScript Academy course includes 4 lessons in total.

What will I learn in “Union Types: A or B”?

Use | to allow multiple type possibilities. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

How long does the “Union Types: A or B” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Union Types: A or B
  2. Intersection Types: A and B
  3. Discriminated Unions for Safe Pattern Matching
  4. Practical Patterns with Union and Intersection
← Back to TypeScript Academy