This Is How I Mastered TypeScript Like I’m 5 (Literal Types!)(8)



This content originally appeared on DEV Community and was authored by Karandeep Singh

Today! We’re going to continue TypeScript learning like you’re a smart 5-year-old who loves to build things and asks “why?” (which is the best thing ever).

& yes “why?” is my way of learning.

I’ve divided this into 20 Chapters. and will go one by one and each will be of 2 – 3 min. of read.
This is a Continuation. if you have not read the Previous chapter – Chapter 7

🧩 Chapter 8: Literal Types – “Exactly This”

(aka: “this one exact thing.”)

🍷 Imagine This:

You tell your friend:

“Bring me a juice.”

They bring Berries 🍇, Peach 🥭, or orange 🍊 because you did not specify which one to bring.

Now you say:

“Bring me exactly orange juice.”

Now there’s zero confusion.

🎯 What are Literal Types?

They let you specify exactly what value is allowed instead of just “any string” or “any number.”

🧪 Example:

let direction: "left" | "right" | "up" | "down";

direction = "left";  // ✅
direction = "jump";  // ❌ Error! Not allowed

This says:

“direction can only be one of these exact strings.”

🛠 Real World Example

let diceRoll: 1 | 2 | 3 | 4 | 5 | 6;

diceRoll = 3; // ✅
diceRoll = 7; // ❌ Error!

Combined with type aliases:

type Theme = "light" | "dark";

let currentTheme: Theme = "light";

🚀 Why is this powerful?

  • It helps enforce exact values in APIs, configurations, UI options, etc.
  • Makes your app safer by restricting invalid values.
  • Helps with auto-suggestions in your preffered IDE.

Read Previous Chapters

If you enjoyed this and want to master TypeScript and other technologies, follow the series and drop a like!🤝

I’m a passionate software developer sharing the cool things I discover, hoping they help you level up on your coding journey.

How i created my own State Management Library : Rethinking State Management in React — From a Dev, for Developers.


This content originally appeared on DEV Community and was authored by Karandeep Singh