Reactive Accelerator
typeScript
Introduction to Type Interfaces and Type Aliases

Interface vs Type Alias

interface আর type alias — দুটোই TypeScript এ custom type define করতে ব্যবহৃত হয়। কিন্তু capability ও ব্যবহার (use case) আলাদা।


Interface: কী এবং কখন ব্যবহার করবো?

Basic Concept:

Interface একটি blueprint বা contract তৈরি করে, যা বলে দেয় যে একটি object বা class এর মধ্যে কি কি properties এবং methods থাকতে হবে। কিন্তু interface নিজে কোনো কোড লিখে না — এটি শুধু একটি structure define করে।

interface মূলত object এর structure বা shape define করতে ব্যবহৃত হয় যেমনঃ

interface User{
    name: string;
    age: number;
    email: string
}

এখন আমরা চাইলে এই User interface কে ব্যাবহার করতে পারবো যেমনঃ

interface User{
    name: string;
    age: number;
    email: string
}
 
function getDetailsOfUser(userObj:User){ 
} 

এখানে আমরা userObj এর টাইপ হিসেবে User interface কে ব্যবহার করেছি ।


Use Cases of Interface

কোন কোন ক্ষেত্রে আমরা Interface কে ব্যবহার করবো তা নিয়ে চলো বিস্তারিত জানি ।

১. Object shape define করা

আমারা Interface কে ব্যবহার করে অবজেক্ট এর সেইপ ডিফাইন করতে পারি এবং সেটা ব্যাবহার করতে পারি।

 
interface Product {
    name: string; 
    image: string;
    price: number;
}
// এখানে আমরা একটা কাস্টম অবজেক্ট এর সেইপ বানিয়েছি যাতে আমরা এটাকে পরে একটা টাইপ ডেফিনেশন হিসেবে ব্যবহার করতে পারি ।
 
const product: Product = {
    name: "Example product",
    image: "something.com",
    price: 20,
};
 
// আমরা এখানে আমাদের বানানো অবজেক্ট এর সেইপ দিয়ে আমরা অবজেক্ট এর টাইপ ডিফাইন করতে পারছি । 
 
function getDetailsOfProduct(productObj: Product) {
    return productObj.name;
}
 
// আবার আমরা এখানেও আমাদের বানানো অবজেক্ট এর সেইপ দিয়ে ফাংশন এর প্রপ্স এর টাইপ বলতে পারছি 
getDetailsOfProduct(product);
 
 

২. Class implement করা

Interface কে আমরা ক্লাস এ ইমপ্লিমেন্ট করতে পারি।

interface Animal {
  sound(): void;
}
 
class Dog implements Animal {
  sound() {
    console.log("Woof!");
  }
}

৩. অন্য interface inherit করা

একটা ইন্টারফেস অন্য আরেকটা ইন্টারফেস কে ইনহেরিট করতে পারে ।

interface Person {
  name: string;
}
 
interface Employee extends Person {
  employeeId: number;
}

৪. Declaration Merging

সেইম নামে দুইবার ইন্টারফেস ডিফাইন করলে সেটা অটোমেটিকেলি মার্জ হয়ে একটা ইন্টারফেস হয়ে যায় ।

interface Window {
  customProp: string;
}
 
interface Window {
  anotherProp: number;
}
// এখন Window = { customProp: string; anotherProp: number }
 

Type Alias: কী এবং কখন ব্যবহার করবো?

Basic Concept:

Type Alias TypeScript এ একধরনের নামকরণ কৌশল, যা কোনো একটি type বা complex structure-কে একটি name দিয়ে উল্লেখ করার সুযোগ দেয়। এটি মূলত কোনো type বা interface এর বদলে একটি সহজ এবং সুন্দর নাম ব্যবহার করার জন্য কাজে আসে।

type হলো একধরনের alias বা shortcut — যেকোনো টাইপকে এক নামে define করতে পারে।

যেমন আমরা যদি চাই যে, টাইপস্ক্রিপ্ট এর number টাইপকে আমরা নাম্বার নামে না রেখে অন্য কোন নামে ব্যাবহার করব অথবা একটা কম্বিনেশন অফ টাইপ যেমন ঃ {name:string; age: number} এটাকে একটা কমন নামে User হিসেবে ধরবো তাহলে এটাকে বলা হয় Type Alias

type numberOfAge = number;
 
type User = {
    name: string;
    age: numberOfAge;
};
 
const persons: User = {
    name: "Alex",
    age: 30,
};
 

Use Cases of Type Alias

কোন কোন ক্ষেত্রে আমরা Type Alias কে ব্যবহার করবো তা নিয়ে চলুন বিস্তারিত জানি ।

১. Union / Intersection তৈরি করা

আমরা টাইপ এলিয়াস ব্যাবহার করে কোন টাইপের ইউনিয়ন বা ইন্টারসেকশন বানাতে পারি।

  • **Union: | মানে হলো যেকোন একটা হতে পারে আবার দুইটাও হতে পারে **
  • Intersection: & মানে হলো দুইটাই হবে
type Status = "loading" | "success" | "error";
 
type Admin = { role: "admin" };
type Guest = { role: "guest" };
type User = Admin | Guest; // Union
 
type Name = { name: string };
type Age = { age: number };
type Person = Name & Age; // Intersection

২. Primitive, Tuple, Function টাইপ define করা

type ID = string | number;
 
type NameAge = [string, number]; // Tuple
 
type Greet = (name: string) => string; // Function type

৩. Generic Type Alias

type ApiResponse<T> = {
  data: T;
  error?: string;
};
 
const userResponse: ApiResponse<{ name: string }> = {
  data: { name: "Rahim" }
};

Type দিয়ে complex type define করা (like API status)

type Status = "idle" | "loading" | "success" | "error";
 
function show(status: Status) {
  if (status === "loading") console.log("Loading...");
}

Difference Between Interface and Type Alias

১. মৌলিক ধারণা (Basic Concept)

interface

মূলত object এর shape বা structure define করতে ব্যবহৃত হয়।

interface User {
  name: string;
  age: number;
}

type

যেকোনো টাইপ define করতে পারে — object, union, tuple, primitive, etc.

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

২. Object Extend করা (Extending / Inheritance)

Interface: একাধিক interface কে extend করা যায়

interface Person {
  name: string;
}
 
interface Employee extends Person {
  employeeId: number;
}

Type: একাধিক type কে extend (intersect) করা যায়, & দিয়ে

type Person = {
  name: string;
};
 
type Employee = Person & {
  employeeId: number;
};

দুইটাতেই extend করা যায়, তবে syntax আলাদা।


৩. Union এবং Intersection

Type: Union ও Intersection ভালোভাবে handle করতে পারে

type ID = string | number;
type Admin = { role: 'admin' };
type User = { role: 'user' };
type Person = Admin | User;

Interface: Union টাইপ define করতে পারে না

// এটা interface দিয়ে করা যাবে না

তাই type ইউজ করো যখন union বা complex types লাগে।


৪. Declaration Merging

Interface: একাধিকবার declare করলে merge হয়ে যায়

interface Box {
  height: number;
}
interface Box {
  width: number;
}
 
// এখন Box = { height: number, width: number }

Type: একবার declare করার পর আবার করা যাবে না

type Box = {
  height: number;
};
 
type Box = {
  width: number;
}; // ❌ Error: Duplicate identifier

Library বানানোর সময় interface ভালো, কারণ declare merge করা যায়।


৫. Practical Example

Interface:

interface Car {
  brand: string;
  drive(): void;
}

Type:

type Car = {
  brand: string;
  drive: () => void;
};

দুইটাই কাজ করবে, কিন্তু interface structure define করার জন্য বেশি natural লাগে।


🔚 কোনটা কখন ব্যবহার করব?

Use CaseRecommendation
Object বা Class এর shapeInterface preferred
Union, IntersectionType preferred
Function, Tuple, Primitive define করতেType
Library বানানোর সময়Interface (because of merging)
Simplicity / Personal Preferenceযেকোনোটা, তবে consistency maintain করো

🔥 Final Tip:

তুমি যদি শুধু object structure define করো, তাহলে interface। যদি complex type composition, union/intersection লাগে, তাহলে type