This Is How I Mastered TypeScript Like I’m 5 (Essential Concepts!)(10)

July 4, 2025

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 9

Chapter 10: Optional, Readonly, and Default

(aka: “Making your TypeScript code more flexible & safe without extra fuss.”)

Imagine This:

You’re designing a lemonade stand order system:

Some customers give their phone number, some don’t. (Optional)
Once you print the order slip, it shouldn’t be changed. (Readonly)
If they don’t specify quantity, you default to 1 cup. (Default values)

Optional (`?`)

You can mark properties or parameters as optional:
Why this is helpful, if you’re calling the same functions from multiple code blocks and some piece is not required to be sent to function, otherwise TS forcefully expects that parameter should also be sent

type Customer = {
  name: string;
  phone?: string; // optional
};

const customer1: Customer = { name: "Karandeep Singh" }; // ✅
const customer2: Customer = { name: "Wisdom Bits", phone: "1234567890" }; // ✅

For function parameters:

function funcName(name: string, age?: number) {
  console.log(`Hi ${name}`);
  if (age) {
    console.log(`You are ${age} years old.`);
  }
}

Readonly (`readonly`)

Once you set the value, you can’t change it.

For objects:

type Order = {
  readonly id: string;
  quantity: number;
};

let order: Order = { id: "ord123", quantity: 2 };
order.quantity = 3; // ✅ allowed
order.id = "ord124"; // ❌ Error: id is readonly

For arrays:

let numbers: readonly number[] = [1, 2, 3];
numbers.push(4); // ❌ Error

Default Parameters

In functions, you can set default values if the caller doesn’t provide them.

function makeLemonade(quantity: number = 1) {
  console.log(`Making ${quantity} cup(s) of lemonade.`);
}

makeLemonade();      // "Making 1 cup(s) of lemonade."
makeLemonade(3);     // "Making 3 cup(s) of lemonade."

Summary Table

Feature	Syntax	Purpose
Optional	`phone?: string`	Value is optional
Readonly	`readonly id: string`	Value can’t change after assignment
Default	`quantity: number = 1`	Sets a fallback if none provided

Why do these matter in real apps?

Makes APIs flexible for callers.
Prevents accidental changes to critical values.
Reduces unnecessary checks for undefined values in your logic.
Increases clarity for team collaboration.

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.