DEV Community

Cover image for This Is How I Mastered TypeScript Like I'm 5 (Essential Concepts!)(10)
Wisdom Bits profile image Karandeep Singh
Karandeep Singh for Wisdom Bits

Posted on • Edited on

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

#typescript #javascript #beginners #webdev

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" }; // ✅
Enter fullscreen mode Exit fullscreen mode

For function parameters:

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

🛡️ 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
Enter fullscreen mode Exit fullscreen mode

For arrays: 

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

🌻 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."
Enter fullscreen mode Exit fullscreen mode

🪐 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.

Top comments (0)