S
Saiful 
Full-Stack 
Developer

My Blogs

Blog Post 3
May 20, 2025

Union and Intersection Types in TypeScript

Union and Intersection types are important features in TypeScript that help ensure type safety in your code.

Union Types

In TypeScript, a union type allows a variable to hold one of several specified types or values. It’s like saying, “This variable can be either one type or another.” This can be especially useful when you want a variable to be limited to a specific set of allowed values, which helps improve type safety in your code. Here's an example of a function that uses a union type:

Basic Union Types

    
type PhoneNumberType = number | string;
const phoneNumber: PhoneNumberType = +883923983434; // Valid
const phoneNumber2: PhoneNumberType = '+883923983434'; // Valid

Union with Literal Types

    
type AnimalType = "dog" | "cat" | "elephant";
const animalType: AnimalType = "dog"; // Valid
const animalType2: AnimalType = "cat"; // Valid
const animalType3: AnimalType = "elephant"; // Valid
const animalType4: AnimalType = "bird"; // Invalid (Type 'bird' is not assignable to type 'AnimalType')

Significance of Union Types:

  • Flexibility: Allows a variable to represent multiple types, enabling broader use cases.
  • Type Safety: Enforces type constraints at compile-time, reducing runtime errors by ensuring only valid types are used.

Intersection Types

Intersection types, on the other hand, enable the combination of multiple types into a single type. This feature is beneficial when we want an object to have the characteristics of multiple types.

Basic Intersection Types

    
interface Person { name: string; age: number };
interface Employee { department: string; salary: number };

type FullPerson = Person & Employee;


const Saiful: FullPerson = { name: 'Md Saiful Islam', age: 22, department: 'Web developer', salary: 5000 }; // Valid

Intersection with Literal Types

    
type Animal = { species: "dog" | "cat" | "elephant" };

type Dog = Animal & { barks: true };
type Cat = Animal & { meows: true };


const dog: Dog = { species: 'dog', barks: true }; // Valid
const cat: Cat = { species: 'cat', meows: true }; // Valid

Intersection with Union Types

    
type PhoneNumberType = number | string;
type FullNameType = { firstName: string; lastName: string };

type User = FullNameType & { phoneNumber: PhoneNumberType };


const user: User = { firstName: 'Md Saiful', lastName: 'Islam', phoneNumber: +883923983434}; // Valid

Significance of Intersection Types:

  • Combining Multiple Types: Useful for scenarios where an object must conform to multiple type interfaces.
  • Enhances Composition: Enables modular type definitions, making it easy to compose complex types from simpler ones.
Read More
Blog Post 3
October 6, 2025

React Router না ব্যবহার করেই Routing সিস্টেম বানানোর অভিজ্ঞতা!

সাম্প্রতিক সময়ে আমি একটা Portfolio Website বানানোর সময় ভিন্ন কিছু করার চেষ্টা করেছিলাম। সাধারণত আমরা React Router ব্যবহার করি, কিন্তু আমি ভাবলাম, React Router ব্যবহার না করে যদি নিজেই রাউটিং সিস্টেম বানাই তাহলে কেমন হয়?

এই জিনিসটা করতে গিয়ে আমি কয়েকটা কনসেপ্ট সম্পর্কে জেনেছি, সেইগুলো হল:

  • 🔹 Reload ছাড়া Routing:

    প্রথমে আমি window.location.href ব্যবহার করেছিলাম, কিন্তু এতে সমস্যা হলো - পুরো পেজ রিলোড হয়ে যাচ্ছিল। কিন্তু React Router এর SPA (Single Page Application) গুলাতে আমরা কোনো রিলোড ছাড়া এক পেজ থেকে অন্য পেজে যেতে পারি!

    👉 সমাধান: window.history.pushState

    window.history.pushState({}, "", path);

    এটা ব্যবহার করলে URL পরিবর্তন হবে ঠিকই, কিন্তু পেজে কোনো রিলোড নিবে না, ঠিক React Router এর মতো।


  • 🔹 Back/Forward Navigation Handling:

    Browser এর back/forward বাটন কাজ করার জন্য আমি popstate ইভেন্ট হ্যান্ডেল করলাম: 

            
useEffect(() => {
  const handlePop = () => setCurrentPath(window.location.pathname);
  window.addEventListener("popstate", handlePop);
  return () => window.removeEventListener("popstate", handlePop);
}, []);


  • 🔹 Dynamic Route:

    Services page থেকে Pricing page যেতে আমার দরকার হলো dynamic route (যেমন /pricing/:id)।
    dynamic route বের করার জন্য প্রথমে আমি window.location.pathname দিয়ে কোন path এ আছি তা বের করে নিলাম। তারপর currentPath.startsWith("/pricing/") দিয়ে চেক করলাম রাউটটা কি /pricing/ দিয়ে শুরু হয়েছে কিনা। যদি হয়, তাহলে currentPath.split("/")[2] দিয়ে serviceId টা পেয়ে গেলাম। 

            
if (currentPath.startsWith("/pricing/")) {
  const serviceId = currentPath.split("/")[2];
  return <PricingPage serviceId={serviceId} />;
}


    এভাবে serviceId ধরে আমি নির্দিষ্ট সার্ভিসের Pricing দেখাতে পেরেছি।

  • 🔹 Reload ছাড়া Navigation:

    আমরা যখন <a href> ট্যাগ ব্যবহার করি, তখন এক page থেকে অন্য page এ যেতে রিলোড নেয়, কিন্তু React Router এর Link ব্যবহার করলে রিলোড ছাড়া এক page থেকে অন্য page এ যাওয়া যায়।

    👉 সমাধান: <a href> সরাসরি ব্যবহার না করে আমি click ইভেন্ট আটকিয়ে কাস্টম ফাংশন চালালাম: 

            
<a
  href="/about"
  onClick={(e) => {
    e.preventDefault();
    onPageChange("/about");
  }}
>
  MORE ABOUT ME
</a>


যদি আমার কোডে আরও উন্নতির জায়গা খুঁজে পান, অবশ্যই জানাবেন। আমি সবসময় শিখতে আগ্রহী এবং নতুন কিছু জানতে ভালোবাসি।

Read More