Welcome back! I am Mihir, and in this lesson we will learn union and literal types in TypeScript.

Union types let a value be one of several types. Literal types let a value be one of several exact values.

What is a Union Type?

Use | to create a union.

let userId: string | number;

userId = "user_101";
userId = 101;

This means userId can be a string or a number.

Invalid:

userId = true;

Boolean is not part of the union.

Union Types in Functions

function printId(id: string | number): void {
  console.log(id);
}

printId("abc");
printId(123);

The function accepts either a string or a number.

Narrowing Union Types

Before using type-specific methods, narrow the value.

function printId(id: string | number): void {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(0));
  }
}

Inside each branch, TypeScript knows the correct type.

Union with null

Union types are common with missing data.

type User = {
  id: number;
  name: string;
};

let selectedUser: User | null = null;

Before using selectedUser, check it:

if (selectedUser !== null) {
  console.log(selectedUser.name);
}

What is a Literal Type?

A literal type is an exact value.

let role: "admin";

role = "admin";

Invalid:

role = "editor";

The value must be exactly "admin".

String Literal Unions

Literal types become powerful when combined with unions.

type Status = "loading" | "success" | "error";

let status: Status = "loading";

status = "success";

Invalid:

status = "done";

"done" is not an allowed status.

Number Literal Unions

type Rating = 1 | 2 | 3 | 4 | 5;

let rating: Rating = 5;

Invalid:

rating = 10;

This is useful when only specific numeric options are allowed.

Boolean Literal Types

Boolean literals are possible too.

type SuccessResponse = {
  success: true;
  message: string;
};

This becomes more useful when building discriminated unions later.

Literal Types in Function Parameters

type Theme = "light" | "dark" | "system";

function setTheme(theme: Theme): void {
  console.log(`Theme changed to ${theme}`);
}

setTheme("dark");

Invalid:

setTheme("blue");

TypeScript catches invalid options immediately.

Literal Types with Objects

type Notification = {
  type: "success" | "error" | "info";
  message: string;
};

const notification: Notification = {
  type: "success",
  message: "Saved successfully",
};

The type property can only be one of the allowed values.

Common Mistake: Too Broad string Types

This is too loose:

let status: string = "loading";

Now any string is allowed:

status = "banana";

Better:

type Status = "loading" | "success" | "error";

let status: Status = "loading";

Quick Reference Summary

Practice

Create a status type:

type PaymentStatus = "pending" | "paid" | "failed";

function getPaymentMessage(status: PaymentStatus): string {
  if (status === "pending") {
    return "Payment is pending";
  }

  if (status === "paid") {
    return "Payment completed";
  }

  return "Payment failed";
}

Try calling the function with "cancelled" and see what TypeScript says.

What You've Learned

You now understand:

• What union types are
• How to use | for multiple possible types
• How to narrow union values
• What literal types are
• How string and number literal unions work
• Why literal unions are safer than broad strings
• How to use literal types in functions and objects

What's Next?

In the next lesson, we will learn Function Parameter Types in TypeScript.

We will type function inputs clearly and avoid implicit any.

Need Help?

• Have questions, confusion, or want to know more? Contact me

Union and literal types are how TypeScript helps your code say: only these options are allowed.