DEV Community: Wisdom Bits

Working with HTML Elements in TypeScript: A Complete Guide(13)

Karandeep Singh — Sat, 26 Jul 2025 12:07:20 +0000

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 12

🧩 Chapter 13: Understanding DOM Elements in TypeScript

(aka: How to Make DOM Elements TypeScript safe!)

Imagine you want to grab an <input> field from a webpage, but TypeScript says, “Wait, I’m confused!” 😕 No worries! By the end of this chapter, you’ll know how to tell TypeScript exactly what’s going on🚀

First let's understand, How to explain to TypeScript what kind of element we’re working with. It’s like giving TypeScript a clear instruction manual! 📖.

🤔 What is Type Assertion?

Type Assertion is like saying to TypeScript:

“Hey, I know this is an <input> element, so let me use its value!”

Two Easy Ways to Do It

Here’s how you can tell TypeScript -

let value = "Karan" as string; // Option 1: Using "as"

let value = <string>"Karan"; // Option 2: Angle brackets

Quick Tip: Use the as way it’s simpler and works better with React/JSX projects. 😊

😕 Understanding, why we get errors?

Let’s say you try to grab an <input> element and get its value -

const input = document.getElementById("myInput");
console.log(input.value); // ❌ ERROR: Property 'value' does not exist on type 'HTMLElement | null'

What’s the problem?

document.getElementById returns HTMLElement | null, which means:

It could be any HTML element (like <div>, <span>, etc.).
It could be null if the element isn’t found.

TypeScript’s like, “I don’t know if this is an <input> or something else!”

🛠️ Fix 1: Tell TypeScript with Type Assertion

Let’s make it clear for TypeScript:

const input = document.getElementById("myInput") as HTMLInputElement;
console.log(input.value); // ✅ Works perfectly!

By adding as HTMLInputElement, we’re saying, “This is an <input>!” Now TypeScript lets us use properties like value, type, or checked without any issues.

🚨 Fix 2: Handling `null` Safely

What if getElementById can’t find the element? It returns null, and trying to use .value on null will break your code. Let’s keep things safe:

Option A: Check with `if`

const el = document.getElementById("myInput");
if (el) {
  const input = el as HTMLInputElement;
  console.log(input.value); // ✅ Safe and happy
}

Option B: Use Optional Chaining (Quick and Easy)

const input = document.getElementById("myInput") as HTMLInputElement | null;
console.log(input?.value); // ✅ Won’t break if input is null

Quick Tip: The if check is safer, but optional chaining (?.) is great for quick scripts. Pick what feels right! 😄

📋 Your DOM Type Guide Sheet

Here’s a simple list of common HTML elements and their TypeScript types!⚡️ (You don't need to save it, but it'll give you a good understanding of HTML Types)

HTML Element	TypeScript Type	What It’s For
`<input>`	`HTMLInputElement`	Text boxes, checkboxes, radios
`<textarea>`	`HTMLTextAreaElement`	Big text areas
`<select>`	`HTMLSelectElement`	Dropdown menus
`<option>`	`HTMLOptionElement`	Choices in a dropdown
`<button>`	`HTMLButtonElement`	Clickable buttons
`<form>`	`HTMLFormElement`	Forms for user input
`<label>`	`HTMLLabelElement`	Labels for form fields
`<img>`	`HTMLImageElement`	Pictures
`<a>`	`HTMLAnchorElement`	Links
`<div>` / `<span>`	`HTMLDivElement` / `HTMLSpanElement`	Basic containers
`<canvas>`	`HTMLCanvasElement`	Drawing or animations
`<video>`	`HTMLVideoElement`	Video players
`<audio>`	`HTMLAudioElement`	Audio players
`<iframe>`	`HTMLIFrameElement`	Embedded content
`<table>`	`HTMLTableElement`	Tables
`<tr>`	`HTMLTableRowElement`	Table rows
`<td>` / `<th>`	`HTMLTableCellElement`	Table cells
`<ul>` / `<ol>`	`HTMLUListElement` / `HTMLOListElement`	Lists (bullet or numbered)
`<li>`	`HTMLLIElement`	List items

👉🏻 You can now safely access HTML properties.

Read Previous Chapters

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

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

Write Like a Pro: 10 TypeScript Utilities You’re Probably Not Using Yet(Type Utilities!)(12)

Karandeep Singh — Thu, 10 Jul 2025 05:11:36 +0000

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 11

🧩 Chapter 12: Utility Types – TypeScript’s Built-In Tools

(aka: “Why rewrite what TypeScript already provides?”)

What are Utility Types?

TypeScript comes with pre-built helper types to transform, filter, or enhance types easily without writing repetitive manual types.

These utilities help you:

✅ Save time
✅ Avoid boilerplate
✅ Keep your types clean & DRY
✅ Write advanced typings easily

Typescript Utilities:

Utility Type	Purpose
`Partial<T>`	Make all props optional
`Required<T>`	Make all props required
`Readonly<T>`	Make all props readonly
`Pick<T, K>`	Pick specific props
`Omit<T, K>`	Remove specific props
`Record<K, T>`	Object with specified keys and type
`Exclude<T, U>`	Remove members from union
`Extract<T, U>`	Extract members from union
`ReturnType<T>`	Get function return type
`Parameters<T>`	Get function parameters as tuple

🚀 `Partial<Type>`

Makes all properties optional.

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

type UpdateUser = Partial<User>;

🚀 `Required<Type>`

Makes all properties required (even if optional originally).

type Settings = {
  darkMode?: boolean;
  fontSize?: number;
};

type StrictSettings = Required<Settings>;

const s: StrictSettings = {
  darkMode: true,
  fontSize: 16,
}; // ✅ Now must provide all properties

🚀 `Readonly<Type>`

Makes all properties readonly.

type Config = {
  apiUrl: string;
};

const config: Readonly<Config> = { apiUrl: "https://api.com" };

config.apiUrl = "https://newapi.com"; // ❌ Error: cannot assign to readonly property

🚀 `Pick<Type, Keys>`

Pick specific properties from a type to create a new type.

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

type UserPreview = Pick<User, "id" | "name">;

const preview: UserPreview = {
  id: 1,
  name: "Karan",
};

🚀 `Omit<Type, Keys>`

Exclude specific properties from a type to create a new type.

type UserWithoutEmail = Omit<User, "email">;

const u: UserWithoutEmail = {
  id: 2,
  name: "Chatu",
};

🚀 `Record<Keys, Type>`

Creates an object type with specific keys and a specific value type.

type Roles = "admin" | "editor" | "viewer";

type Permissions = Record<Roles, boolean>;

const perms: Permissions = {
  admin: true,
  editor: true,
  viewer: false,
};

🚀 `Exclude<UnionType, ExcludedMembers>`

Removes specific members from a union.

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

type NonErrorStatus = Exclude<Status, "error">;
// Result: "loading" | "success"

🚀 `Extract<UnionType, Members>`

Extracts only specified members from a union.

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

type LoadingStatus = Extract<Status, "loading">;
// Result: "loading"

🚀 `ReturnType<Type>`

Gets the return type of a function.

function getUser() {
  return { id: 1, name: "Chatu" };
}

type UserType = ReturnType<typeof getUser>;
// { id: number; name: string }

🚀 `Parameters<Type>`

Gets the types of parameters of a function as a tuple.

function user(name: string, age: number) {}

type Params = Parameters<typeof user>;
// [string, number]

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.

TypeScript’s Most Important Concept, Made Stupidly Simple(Generics!)(11)

Karandeep Singh — Sat, 05 Jul 2025 16:00:44 +0000

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 10

Real Production Use - present in the end of Article.

🧩 Chapter 11: Generics – Magic Boxes That Work for Anything

(aka: “Reusable, type-safe superpowers without repeating yourself.”)

In TypeScript, Generics are these magic boxes:

They let you write one function or type that can work with any type while keeping type safety. Not clear🤔 Let's understand with examples, then will break it down...

🧪 Example 1: Identity Function

A function that returns what you give it:

function identity<T>(value: T): T { // syntax
  return value;
}

Here:

<T> is a type variable (magic box)
Whatever type you pass in (number, string, etc.), TS knows it will return the same type.

Usage:

let num = identity(5);         // num: number
let str = identity("hello");   // str: string

🧪 Example 2: Generics in Arrays

Imagine you want to get the first element of any array:

function firstElement<T>(arr: T[]): T {
  return arr[0];
}

let firstNum = firstElement([1, 2, 3]);        // number
let firstStr = firstElement(["a", "b", "c"]);  // string

✅ Works for any array type
✅ Returns the correct type automatically

🧩 Example 3: Generics in Types

You can create generic types too.

type Box<T> = {
  value: T;
};

let box1: Box<number> = { value: 100 };
let box2: Box<string> = { value: "Karan" };

🔧 Example 4: Generics with Constraints

What if you want your generic to only accept types with specific properties?

function getLength<T extends { length: number }>(item: T): number {
  return item.length;
}

getLength("hello");          // ✅ string has length
getLength([1, 2, 3]);        // ✅ array has length
getLength(123);              // ❌ number doesn't have length

🛠️ Real Production Use: React Components

type ListProps<T> = {
  items: T[];
  renderItem: (item: T) => JSX.Element;
};

function List<T>({ items, renderItem }: ListProps<T>) {
  return <div>{items.map(renderItem)}</div>;
}

🌼 What does this do?

You are building a reusable List component that:
✅ Can render any type of list (numbers, strings, users, products)
✅ Knows exactly what type it is rendering
✅ Keeps type safety and auto-complete while using it in your app

🔧 Breaking it down:

`type ListProps<T> = {...}`

We create a generic type alias called ListProps.
<T> makes it generic so it can adapt to any item type you pass.
It has:
- items: T[] → An array of any type T you will provide.
- renderItem: (item: T) => JSX.Element → A function you give to render each item of type T into React elements.

`function List<T>(...) {...}`

We define a generic React component:

<T> lets this component adapt to any type you pass.
It accepts props of type ListProps<T>, ensuring that:
- The items array contains only items of type T.
- The renderItem function receives exactly type T.

🚀 How do you use it?

Example B: Rendering a list of users

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

<List
  items={[
    { id: 1, name: "Karan" },
    { id: 2, name: "Wisdom Bits" },
  ]}
  renderItem={(user) => <div key={user.id}>{user.name}</div>}
/>

✅ Here, T is inferred as User.

Why is this powerful in production?

✅ Reusability:
You write List once and use it everywhere without rewriting for each type.

✅ Type Safety:
If you try to access a non-existent property on user, TS will catch it.

✅ Cleaner UI Components:
You abstract common rendering patterns while keeping them type-safe.

🎯 In one line:

Using Generics in React like this allows you to build reusable, type-safe UI components that adapt to any data structure while maintaining strong TypeScript protection.

Recap

Concept	Example	Meaning
Generic variable	`<T>`	Placeholder for any type
In functions	`function<T>(param: T): T`	Works with any type
In types	`type Box<T> = { value: T }`	Box can hold any type
With constraints	`<T extends { length: number }>`	Only types with length allowed

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 Is How I Mastered TypeScript Like I'm 5 (Essential Concepts!)(10)

Karandeep Singh — Fri, 04 Jul 2025 05:21:41 +0000

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.

This Is How I Mastered TypeScript Like I'm 5 (Enums!)(9)

Karandeep Singh — Wed, 02 Jul 2025 14:39:34 +0000

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 8

🧩 Chapter 9: Enums

(aka: “Giving numbers and strings meaningful values for your app.”)

🎨 Imagine This:

You’re making a game with four difficulties:

Easy
Medium
Hard
Impossible

You could:

Use "easy", "medium", etc. everywhere (but risk typos like "medum")
Use numbers like 1, 2, 3, 4 (but you’ll forget which is which)

Enums help you give names to these values and keep them organized.

🚦 What is an Enum?

An Enum is like a labeled list of values you can use in your code.

🧪 Basic Enum Example:

enum Difficulty {
  Easy,
  Medium,
  Hard,
  Impossible,
}

let gameLevel: Difficulty = Difficulty.Medium;

console.log(gameLevel); // 1 (because Easy=0, Medium=1, ...)

🤝 Why use Enums?

✅ Readability: Difficulty.Medium is clearer than "medium" or 1.
✅ Safety: Prevents typos ("medum" ❌).
✅ Organized: All values live in one place.

Production Example: Enums for User Roles in an App

Imagine you’re building a team management SaaS.
Users can have roles like:

Admin
Editor
Viewer

Using Enums, you can cleanly manage permissions.

🚦 Step 1: Define the Enum

// userRoles.ts

export enum UserRole {
  Admin = "ADMIN",
  Editor = "EDITOR",
  Viewer = "VIEWER",
}

🚦 Step 2: Use it in your user model

// models/user.ts

import { UserRole } from "./userRoles";

type User = {
  id: string;
  name: string;
  email: string;
  role: UserRole;
};

const user: User = {
  id: "u123",
  name: "Karandeep Singh",
  email: "karandeep@wisdimbits.com",
  role: UserRole.Editor,
};

🚦 Step 3: Permission checks in services

// services/checkPermission.ts

import { UserRole } from "./userRoles";

function canEditContent(role: UserRole) {
  return role === UserRole.Admin || role === UserRole.Editor;
}

// Usage
if (canEditContent(user.role)) {
  console.log("User can edit content");
} else {
  console.log("User can only view content");
}

🌱 Summary

Using enums for roles, statuses, modes, environment constants, and permission levels is a best practice in production TypeScript apps to:
✅ Reduce bugs
✅ Improve clarity
✅ Enable safe refactoring later.

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 Is How I Mastered TypeScript Like I'm 5 (Literal Types!)(8)

Karandeep Singh — Mon, 30 Jun 2025 16:21:31 +0000

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
Next : Chapter 9

🧩 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 Is How I Mastered TypeScript Like I'm 5 (Type Inference!)(7)

Karandeep Singh — Sun, 29 Jun 2025 15:05:41 +0000

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 6

🧩 Chapter 7: Type Inference – When TypeScript Thinks for You

Imagine This:

You say:

“Let’s play a game!”

And your friend immediately knows:

It’s probably a board game
Probably indoors
Probably with snacks 🍿

You never told them all that, but they guessed from experience.

TypeScript does that too, it infers (guesses) the type when you don’t write it explicitly!

Example 1 – Simple variable

let age = 10;

You didn’t say : number, but TypeScript knows age is a number.

So later:

age = "ten"; // ❌ ERROR! You can’t put a string here!

Example 2 – From functions

function double(x: number) {
  return x * 2;
}

let result = double(5); // TypeScript infers result is number

Even though you didn’t write : number for result, TypeScript figured it out.

Example 3 – Arrays

let colors = ["red", "green", "blue"];
// Inferred as: string[]

colors.push("yellow"); // ✅
colors.push(123);      // ❌ Nope!

Example 4 – Object Inference

let user = {
  name: "Chatu",
  active: true,
};
// Inferred as: { name: string; active: boolean }

❗ But Sometimes You Gotta Be Explicit

If you say:

let guess; // 🤔 What is this?
guess = 5;
guess = "hello";

TypeScript says: “Okay, I give up. I’ll treat it as any”

To avoid this, always assign immediately or give a type:

let guess: number;

Rule of Thumb:

Situation	What to Do
Simple value + assignment	Let TS guess (inference is great!)
No value or complex shape	Be explicit (add types)
Working in teams	Prefer clarity over guessing

Summary

TS can guess types for you (this is inference)
It works best when you assign a value right away
For tricky or empty variables, tell TS yourself

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 Is How I Mastered TypeScript Like I'm 5 (Type Narrowing!)(6)

Karandeep Singh — Sat, 28 Jun 2025 15:46:04 +0000

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 5

This is Chapter ⓺ TS Mastering

🧩 Chapter 6: Type Narrowing – Becoming a Type Detective

(aka: “Figuring out what type something really is!”)

🧸 Imagine This:

You get a mystery gift 🎁
You know it’s either a teddy bear or a Lego set... but you’re blindfolded!
So you feel the shape and say:

“Aha! It has squishy arms… must be a teddy bear!”

That’s what type narrowing does:
TypeScript helps you figure out the exact type of a variable when it could be more than one.

👀 When do we need this?

When you use union types like:

let value: string | number;

You can’t just say:

console.log(value.toUpperCase()); // ❌ Error!

TypeScript: “Wait… What if it’s a number?”

So you narrow it down:

🔎 1. Using `typeof`

function print(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase()); // ✅ Safe!
  } else {
    console.log(value.toFixed(2)); // ✅ Must be number!
  }
}

typeof checks the kind of value at runtime and narrows it!

🧪 2. Using `in` for objects

type Dog = { bark: () => void };
type Cat = { meow: () => void };

function speak(pet: Dog | Cat) {
  if ("bark" in pet) {
    pet.bark(); // 🐶
  } else {
    pet.meow(); // 🐱
  }
}

🧱 3. Using `instanceof`

Works with classes!

class Car {
  drive() {}
}
class Bike {
  pedal() {}
}

function move(vehicle: Car | Bike) {
  if (vehicle instanceof Car) {
    vehicle.drive();
  } else {
    vehicle.pedal();
  }
}

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 Is How I Mastered TypeScript Like I'm 5 (And How You Can, Too!)(5)

Karandeep Singh — Fri, 27 Jun 2025 15:42:07 +0000

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 4

This is Chapter ⓹ TS Mastering

🧩 Chapter 5: Union & Intersection Types – “OR” and “AND” Magic

(aka: “Mix and Match Your Types!”)

Imagine This:

You’re designing a costume box for a party:

Some kids can be either a pirate OR a ninja
Some want to be both at the same time! 🏴‍☠️➕🥷

TypeScript says:

“No problem. I’ve got you.”

🔀 Union Types (`|`) – OR this OR that

Use when something can be one of multiple types.

let value: string | number;

value = "hello"; // ✅
value = 123;     // ✅
value = true;    // ❌ Nope! Only string or number

This says:

“value can be a string OR a number”

🧪 Real Example:

function printId(id: string | number) {
  console.log("Your ID is:", id);
}

So you can call printId("ABC123") or printId(9) — both are fine!

But there’s a catch: when using union types, you need to be careful what methods you use:

id.toUpperCase(); // ❌ What if it's a number?

TS will say: “Hold up! Not every type in the union has that method.”

We'll fix this later with Type Narrowing in Chapter 6 🕵️

🔗 Intersection Types (`&`) – this AND that

Use when you want to combine multiple types into one.

type Person = { name: string };
type Coder = { knowsTS: boolean };

type TSDev = Person & Coder;

let dev: TSDev = {
  name: "Karandeep Singh",
  knowsTS: true,
};

This says:

“A TSDev is both a Person and a Coder.”

You’ve now learned how to mix and match types like a pro

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 Is How I Mastered TypeScript Like I'm 5 (Type, Interfaces & Inheritance!)(4)

Karandeep Singh — Thu, 26 Jun 2025 14:20:20 +0000

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 Previous chapter - Chapter 3

This is Chapter ⓸ TS Mastering

🧩 Chapter 5: Type Aliases & Interfaces

(aka: “Why repeat yourself when you can name your thing once?”)

🎭 Imagine this:

You keep writing this:

let person: { name: string; age: number; isCool: boolean }

over and over and over again... 🥱

Wouldn’t it be cool to say:

“Let’s call a common type for Person!”

✅ Type Aliases – Give a shape a nickname

Think of it like, using a same type instance for similar type of objects.
Here Both, me and friend is of type - Person

type Person = {
  name: string;
  age: number;
  isCool: boolean;
};

let me: Person = {
  name: "Karandeep Singh",
  age: 25,
  isCool: true,
};
let friend: Person = {
  name: "some name",
  age: 25,
  isCool: true,
};

Now, instead of rewriting the full type again & again, just say :Person as the type for every person object you create.

🤝 Interfaces – Like `type`, but for teamwork!

interface Car {
  brand: string;
  speed: number;
  electric?: boolean; // optional
}

let myCar: Car = {
  brand: "BMW M5",
  speed: 200,
};

Interfaces are great when many people or pieces of code work together, like a contract everyone agrees on 🤝

🥊 Type vs Interface: What’s the difference?

Feature	`type`	`interface`
Used for	Anything	Mostly for objects/classes
Can extend	✅ Yes (`&`)	✅ Yes (`extends`)
Can merge	❌ No	✅ Yes (declaration merge)
Can do unions	✅ Yes (`A - B`)	❌ Not directly

For most cases, either works fine — go with what feels good!

🔧 Extending Types – Inheritance!

type Animal = {
  name: string;
};

type Dog = Animal & {
  barkVolume: number;
};

let d: Dog = {
  name: "Bruno",
  barkVolume: 8,
};

OR using interface:

interface Animal {
  name: string;
}

interface Dog extends Animal {
  barkVolume: number;
}

Both ways say:

"Dog is like Animal… plus extra properties"

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 Is How I Mastered TypeScript Like I'm 5 (And How You Can, Too!) (3)

Karandeep Singh — Wed, 25 Jun 2025 16:51:27 +0000

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 Previous chapter - Chapter 2

This is Chapter ⓷ TS Mastering

🧩 Chapter 3: Managing Functions with Typescript!

(aka: “Telling your helpers what kind of stuff they’ll handle”)

🍳 Imagine this:

You have a kitchen robot 🧑‍🍳🤖

You tell it:

“Make me a sandwich with bread and cheese.”

But what if you accidentally say:

“Make me a sandwich with rocks and batteries”? 🪨🔋😨

In JavaScript, the robot might try to do it.
But in TypeScript, it says:

❌ “Hey! That’s not sandwich stuff!”

🛠️ Let’s build a function with types!

Without TypeScript (JavaScript):

function add(a, b) {
  return a + b;
}

add(5, "10"); // Uh oh! Output is "510"

With TypeScript:

function add(a: number, b: number): number {
  return a + b;
}

add(5, 10);   // ✅ OK!
add(5, "10"); // ❌ Error! TS says: "I expected a number, not a string"

🧙‍♂️ Parts of a Typed Function:

function greet(name: string): string {
  return "Hello, " + name;
}

name: string → input must be a string
: string after the ) → function returns a string

💡 What if a function returns nothing?

That’s called void:

function logMessage(msg: string): void {
  console.log("Message:", msg);
}

Think of void like: “I’m just doing stuff, not giving anything back.”

🪄 Default and Optional Parameters

function greet(name: string = "friend") {
  console.log("Hi", name);
}

function greetAgain(name?: string) {
  console.log("Hello", name ?? "buddy");
}

= means default
? means it’s optional

🧪 Example:

function multiply(a: number, b: number): number {
  return a * b;
}

const result = multiply(3, 4); // result is 12 ✅

Try changing 4 to "4" and see TypeScript stop you. 🛑

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 Is How I Mastered TypeScript Like I'm 5 (And How You Can, Too!) (2)

Karandeep Singh — Tue, 24 Jun 2025 11:13:50 +0000

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 Previous chapter - Chapter 1

This is Chapter ⓶ TS Mastering

🧩 Chapter 2: The World of Types

(aka: “Everything has a shape!”)

🧃 Imagine this:

You have a juice box. You know:

It’s made of liquid 🍹
It has a flavor (like mango or orange)
You can’t use it to hammer nails 🧃❌🔨 Do you?

That’s what types do in TypeScript, they describe what something is supposed to be, so you don’t accidentally mess up.(Kind of kids example, but we are learning like one)

🎨 TypeScript’s Basic Types

Let’s learn the common ones with super easy examples:

1. number → Just numbers!

let age: number = 10;

Can be: 1, 99, -5, 3.14

2. string → Words or text

let name: string = "Mastereing TS";

Can be: "hello", "123", "💻"

3. boolean → Only true or false

let isCool: boolean = true;

Can be: true, false

4. null & undefined → "Nothing is here"

let nothingHere: null = null;
let notYetAssigned: undefined = undefined;

Use when something is empty or not ready yet

5. any → 😬 “I don’t know what this is, so do whatever”

let mystery: any = "could be anything";
mystery = 5;
mystery = true;

Pro-Tip : Try to avoid this unless you really need to.

6. array → A list of things

let fruits: string[] = ["apple", "banana", "mango"];
let scores: number[] = [99, 88, 77];

7. object → A bunch of key-value pairs

let person: { name: string; age: number } = {
  name: "Wisdom Bits",
  age: 1000,
};

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.

DEV Community: Wisdom Bits

Working with HTML Elements in TypeScript: A Complete Guide(13)

🧩 Chapter 13: Understanding DOM Elements in TypeScript

🤔 What is Type Assertion?

Two Easy Ways to Do It

😕 Understanding, why we get errors?

🛠️ Fix 1: Tell TypeScript with Type Assertion

🚨 Fix 2: Handling null Safely

Option A: Check with if

Option B: Use Optional Chaining (Quick and Easy)

📋 Your DOM Type Guide Sheet

Read Previous Chapters

Write Like a Pro: 10 TypeScript Utilities You’re Probably Not Using Yet(Type Utilities!)(12)

🧩 Chapter 12: Utility Types – TypeScript’s Built-In Tools

What are Utility Types?

Typescript Utilities:

🚀 Partial<Type>

🚀 Required<Type>

🚀 Readonly<Type>

🚀 Pick<Type, Keys>

🚀 Omit<Type, Keys>

🚀 Record<Keys, Type>

🚀 Exclude<UnionType, ExcludedMembers>

🚀 Extract<UnionType, Members>

🚀 ReturnType<Type>

🚀 Parameters<Type>

Read Previous Chapters

TypeScript’s Most Important Concept, Made Stupidly Simple(Generics!)(11)

Real Production Use - present in the end of Article.

🧩 Chapter 11: Generics – Magic Boxes That Work for Anything

🧪 Example 1: Identity Function

🧪 Example 2: Generics in Arrays

🧩 Example 3: Generics in Types

🔧 Example 4: Generics with Constraints

🛠️ Real Production Use: React Components

🌼 What does this do?

🔧 Breaking it down:

type ListProps<T> = {...}

function List<T>(...) {...}

🚀 How do you use it?

Example B: Rendering a list of users

Why is this powerful in production?

🎯 In one line:

Recap

Read Previous Chapters

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

🧩 Chapter 10: Optional, Readonly, and Default

🧃 Imagine This:

🌼 Optional (?)

🛡️ Readonly (readonly)

For objects:

For arrays:

🌻 Default Parameters

🪐 Summary Table

💡 Why do these matter in real apps?

Read Previous Chapters

This Is How I Mastered TypeScript Like I'm 5 (Enums!)(9)

🧩 Chapter 9: Enums

🎨 Imagine This:

🚦 What is an Enum?

🧪 Basic Enum Example:

🤝 Why use Enums?

Production Example: Enums for User Roles in an App

🚦 Step 1: Define the Enum

🚦 Step 2: Use it in your user model

🚦 Step 3: Permission checks in services

🌱 Summary

Read Previous Chapters

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

🧩 Chapter 8: Literal Types – "Exactly This"

🍷 Imagine This:

🎯 What are Literal Types?

🧪 Example:

🛠️ Real World Example

Combined with type aliases:

🚀 Why is this powerful?

Read Previous Chapters

This Is How I Mastered TypeScript Like I'm 5 (Type Inference!)(7)

🧩 Chapter 7: Type Inference – When TypeScript Thinks for You

Imagine This:

🚨 Fix 2: Handling `null` Safely

Option A: Check with `if`

🚀 `Partial<Type>`

🚀 `Required<Type>`

🚀 `Readonly<Type>`

🚀 `Pick<Type, Keys>`

🚀 `Omit<Type, Keys>`

🚀 `Record<Keys, Type>`

🚀 `Exclude<UnionType, ExcludedMembers>`

🚀 `Extract<UnionType, Members>`

🚀 `ReturnType<Type>`

🚀 `Parameters<Type>`

`type ListProps<T> = {...}`

`function List<T>(...) {...}`

🌼 Optional (`?`)

🛡️ Readonly (`readonly`)

🔎 1. Using `typeof`

🧪 2. Using `in` for objects

🧱 3. Using `instanceof`

🔀 Union Types (`|`) – OR this OR that

🔗 Intersection Types (`&`) – this AND that

🤝 Interfaces – Like `type`, but for teamwork!