DEV Community: Karandeep Singh

Redux or Zustand? Or Maybe Something Better...

Karandeep Singh — Sat, 26 Jul 2025 14:41:56 +0000

Karandeep Singh

Jul 13 '25

🚀 Think Redux and Zustand Are Fast? We Put Them to the Test.

#react #redux #javascript #programming

Comments 3

2 min read

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.

TypeScript’s Most Useful Concept!

Karandeep Singh — Fri, 18 Jul 2025 12:57:16 +0000

Karandeep Singh for Wisdom Bits

Jul 5 '25

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

Comments

3 min read

🚀 Think Redux and Zustand Are Fast? We Put Them to the Test.

Karandeep Singh — Sun, 13 Jul 2025 06:04:06 +0000

If you’re building React apps, chances are you’ve either used Redux or Zustand for state management.

All solid choices for managing state in your React app. But when your app grows, when thousands of updates happen under the hood, and when users expect a smooth UI, does your state manager keep up?

And for this test, we are also including a new library. That we built ourselves.
Overwatch, a lightweight, hooks and minimal API based state management library for React and Next.js with a single focus.

Keep your apps fast while making state management feel effortless.

and are these popular libraries really the best for your app’s performance?

🕵🏻‍♂️ We decided to find out.

⚡️ But How Fast Is “Fast”?

Anyone can claim “fast”, so I decided to put Redux, Zustand, and Overwatch Ts to the test under realistic conditions.

🤔 How I Tested?

In this benchmark I used the best practices for all three libraries, no additional optimisations.

I ran benchmark tests that simulate real world usage patterns:

10,000 concurrent state updates to stress test update cycles.
1000 Components to test re-rendering using specialised Hooks provided by all three. (useStore, usePicker and useSelector)
Cold start initialization to measure startup overhead.
Memory usage deltas before and after updates.
Multiple iterations (100 runs) to get consistent averages.

All libraries were tested under the same machine and conditions for fairness.

📊 The results?

🚀 Overwatch clocked in ~11.7× faster than Zustand (~91% faster).

🚀 Overwatch was ~18.3× faster than Redux Toolkit (~95% faster).

We were as surprised as you are.

⚡️ Why Is Overwatch TS So Fast?

While Zustand and Redux use well-optimized approaches, Overwatch TS achieves these gains by:

As one of the Overwatch developers, I believe it takes a fresh approach from an architectural perspective. It moves away from the Flux Architecture (like Zustand/Redux) and uses a modern, singleton Publisher-Subscriber pattern. Its simplicity is its core strength. Yes, there are other major factors as well.

✅ Using microtask-based batching to combine multiple state updates in the same tick, reducing re-render cycles.
✅ Employing immutability safely and efficiently, skipping heavy proxies where not needed.
✅ Performing fine-grained subscriptions so only the components that need updates are re-rendered.
✅ Removing boilerplate without sacrificing control.

This means your React components stay fast, even with heavy interactions and complex states.

🤝 Want to See for Yourself?

I’ve made it super easy,

👉🏻 Run the live benchmarks yourself: Watchly Benchmark

</> Inspect or fork the benchmarking playground: Github

✨ Contribute to GitHub:

🔗 Check out Overwatch TS on GitHub
🔗 Documentation

Help Build the Sensible

I truly believe we’re past the age of monolithic, store-centric global state. Modern applications are more component-driven, async-heavy, and UI-dynamic than ever. We need tools that reflect this reality.

Join the journey to build a most sensible state layer for React.

Let me know in the comments, or feel free to reach out if you’d like help optimizing your app’s performance.

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.

[Boost]

Karandeep Singh — Mon, 07 Jul 2025 10:41:17 +0000

Karandeep Singh for Wisdom Bits

Jul 5 '25

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

Comments

3 min read

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.

The State Management Secret No One Told You About

Karandeep Singh — Sat, 28 Jun 2025 16:02:47 +0000

Karandeep Singh

Jun 16 '25

Rethinking State Management in React — From a Dev, for Developers.

#react #webdev #productivity #frontend

Comments 1

3 min read

DEV Community: Karandeep Singh

Redux or Zustand? Or Maybe Something Better...

🚀 Think Redux and Zustand Are Fast? We Put Them to the Test.

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

TypeScript’s Most Useful Concept!

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

🚀 Think Redux and Zustand Are Fast? We Put Them to the Test.

🕵🏻‍♂️ We decided to find out.

⚡️ But How Fast Is “Fast”?

🤔 How I Tested?

📊 The results?

🚀 Overwatch clocked in ~11.7× faster than Zustand (~91% faster).

🚀 Overwatch was ~18.3× faster than Redux Toolkit (~95% faster).

⚡️ Why Is Overwatch TS So Fast?

🤝 Want to See for Yourself?

✨ Contribute to GitHub:

Help Build the Sensible

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

[Boost]

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

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

🚨 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`)