Type vs Interface

"🆚 āϟāĻžāχāĻĒ āĻŦāύāĻžāĻŽ āχāĻ¨ā§āϟāĻžāϰāĻĢ⧇āϏ (Type vs Interface): āϕ⧋āύāϟāĻŋ āĻ•āĻ–āύ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŦ⧇āύ?"

By Tanvir Ahmed

May 7th, 2025

🆚 āϟāĻžāχāĻĒ āĻŦāύāĻžāĻŽ āχāĻ¨ā§āϟāĻžāϰāĻĢ⧇āϏ (Type vs Interface): āϕ⧋āύāϟāĻŋ āĻ•āĻ–āύ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŦ⧇āύ?

âœī¸ āϏāĻ‚āĻ•ā§āώāĻŋāĻĒā§āϤ āĻŦāĻŋāĻŦāϰāĻŖ

TypeScript-āĻ type āĻāĻŦāĻ‚ interface āĻĻ⧁āϟāĻŋ āĻĒā§āϰāĻžā§Ÿ āĻāĻ•āχ āĻ•āĻžāĻœā§‡āϰ āϜāĻ¨ā§āϝ āĻŦā§āϝāĻŦāĻšā§ƒāϤ āĻšā§Ÿ — āϟāĻžāχāĻĒ āϏāĻ‚āĻœā§āĻžāĻžā§ŸāύāĨ¤
āϤāĻŦ⧇ āĻāĻĻ⧇āϰ āĻŽāĻ§ā§āϝ⧇ āĻ•āĻŋāϛ⧁ āĻĒāĻžāĻ°ā§āĻĨāĻ•ā§āϝ āφāϛ⧇, āϝ⧇āϗ⧁āϞ⧋ āϜāĻžāύāĻž āĻĨāĻžāĻ•āϞ⧇ āϏāĻ āĻŋāĻ• āĻĒāϰāĻŋāĻ¸ā§āĻĨāĻŋāϤāĻŋāϤ⧇ āϏāĻ āĻŋāĻ•āϟāĻŋ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āϝāĻžā§ŸāĨ¤


🔍 Type vs Interface - āĻŽā§‚āϞ āĻĒāĻžāĻ°ā§āĻĨāĻ•ā§āϝāϗ⧁āϞ⧋

  • đŸŽ¯ āωāĻĻā§āĻĻ⧇āĻļā§āϝ:

    • interface: āĻļ⧁āϧ⧁āĻŽāĻžāĻ¤ā§āϰ āĻ…āĻŦāĻœā§‡āĻ•ā§āϟ āϟāĻžāχāĻĒ āĻĄāĻŋāĻĢāĻžāχāύ āĻ•āϰāĻžāĨ¤
    • type: āϝ⧇āϕ⧋āύ⧋ āϧāϰāύ⧇āϰ āϟāĻžāχāĻĒ āĻĄāĻŋāĻĢāĻžāχāύ āĻ•āϰāĻž (āĻ…āĻŦāĻœā§‡āĻ•ā§āϟ, āχāωāύāĻŋāϝāĻŧāύ, āĻĒā§āϰāĻŋāĻŽāĻŋāϟāĻŋāĻ­)āĨ¤
  • 🔗 Extend / Merge:

    • interface: āϏāĻšāĻœā§‡ extend āĻ•āϰāĻž āϝāĻžā§Ÿ āĻāĻŦāĻ‚ auto-merge āĻšā§ŸāĨ¤
    • type: extend āĻ•āϰāĻž āϝāĻžā§Ÿ (with &), āϤāĻŦ⧇ merge āĻšā§Ÿ āύāĻžāĨ¤
  • 🔄 āĻĒ⧁āύāϰāĻžā§Ÿ āĻ˜ā§‹āώāĻŖāĻž:

    • interface: āĻāĻ•āĻžāϧāĻŋāĻ•āĻŦāĻžāϰ declare āĻ•āϰ⧇ merge āĻ•āϰāĻž āϝāĻžā§ŸāĨ¤
    • type: āĻāĻ•āĻŦāĻžāϰāχ declare āĻ•āϰāĻž āϝāĻžā§ŸāĨ¤
  • 💡 āĻĢāĻžāĻ‚āĻļāύ āϟāĻžāχāĻĒ:

    • interface: āĻ•āĻˇā§āϟāĻ•āϰāĻ­āĻžāĻŦ⧇ define āĻ•āϰāϤ⧇ āĻšā§ŸāĨ¤
    • type: āϏāĻšāĻœā§‡ āĻĢāĻžāĻ‚āĻļāύ āϟāĻžāχāĻĒ define āĻ•āϰāĻž āϝāĻžā§ŸāĨ¤
  • 👨‍đŸ’ģ āĻ•ā§āϞāĻžāϏ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ:

    • interface: āĻ•ā§āϞāĻžāϏ implement āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āĨ¤
    • type: āĻ•ā§āϞāĻžāϏ⧇ type āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āϝāĻžā§Ÿ āύāĻžāĨ¤
  • 🧩 āχāωāύāĻŋāϝāĻŧāύ āϟāĻžāχāĻĒ:

    • interface: āϏāĻŽā§āĻ­āĻŦ āύ⧟āĨ¤
    • type: āϏāĻšāĻœā§‡āχ āχāωāύāĻŋāϝāĻŧāύ āϟāĻžāχāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰāĻž āϝāĻžā§ŸāĨ¤ | 🧩 āχāωāύāĻŋāϝāĻŧāύ āϟāĻžāχāĻĒ | āϏāĻŽā§āĻ­āĻŦ āύ⧟ | āϏāĻŽā§āĻ­āĻŦ |

🔧 āϕ⧋āĻĄā§‡āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āϤ⧁āϞāύāĻž

✅ interface:

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

✅ type:

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

đŸ§Ŧ Extend (interface):

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

đŸ§Ŧ Extend (type):

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

đŸ§Ē āĻĒā§āĻ°ā§āϝāĻžāĻ•āϟāĻŋāϏ āĻĒā§āϰāĻŦāϞ⧇āĻŽ

āĻĒā§āϰāĻļā§āύ:

āφāĻĒāύāĻžāϕ⧇ āĻĻ⧁āϟāĻŋ āϟāĻžāχāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰāϤ⧇ āĻšāĻŦ⧇:

  1. Person — name (string), age (number)
  2. Developer — extends Person, with language (string)

āϤāĻžāϰāĻĒāϰ āĻāĻ•āϟāĻŋ āĻ…āĻŦāĻœā§‡āĻ•ā§āϟ āϤ⧈āϰāĻŋ āĻ•āϰ⧁āύāĨ¤

✅ āϏāĻŽāĻžāϧāĻžāύ (interface āĻĻāĻŋā§Ÿā§‡):

interface Person {
  name: string;
  age: number;
}
 
interface Developer extends Person {
  language: string;
}
 
const dev: Developer = {
  name: "Fahim",
  age: 28,
  language: "TypeScript"
};

✅ āϏāĻŽāĻžāϧāĻžāύ (type āĻĻāĻŋā§Ÿā§‡):

type Person = {
  name: string;
  age: number;
};
 
type Developer = Person & {
  language: string;
};
 
const dev: Developer = {
  name: "Fahim",
  age: 28,
  language: "TypeScript"
};

đŸ’ŧ āχāĻ¨ā§āϟāĻžāϰāĻ­āĻŋāω āĻĒā§āϰāĻļā§āύ āĻ“ āωāĻ¤ā§āϤāϰ

ā§§. type āĻāĻŦāĻ‚ interface āĻāϰ āĻŽāĻ§ā§āϝ⧇ āĻĒā§āϰāϧāĻžāύ āĻĒāĻžāĻ°ā§āĻĨāĻ•ā§āϝ āϕ⧀?

āωāĻ¤ā§āϤāϰ: type āĻ…āύ⧇āĻ• āϧāϰāύ⧇āϰ āϟāĻžāχāĻĒ (union, primitives) āϤ⧈āϰāĻŋ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇, āφāϰ interface āĻļ⧁āϧ⧁āĻŽāĻžāĻ¤ā§āϰ object āϟāĻžāχāĻĒ⧇āϰ āϜāĻ¨ā§āϝāĨ¤ āϤāĻŦ⧇ interface extend āĻ“ merge āĻ•āϰāϤ⧇ āϏ⧁āĻŦāĻŋāϧāĻž āĻĻā§‡ā§ŸāĨ¤


⧍. āϕ⧋āύāϟāĻŋ āĻŦ⧇āĻļāĻŋ āĻŦā§āϝāĻŦāĻšāĻžāϰāϝ⧋āĻ—ā§āϝ: type āύāĻž interface?

āωāĻ¤ā§āϤāϰ:

  • āϝāĻĻāĻŋ object structure āύāĻŋāĻ°ā§āϧāĻžāϰāĻŖ āĻ•āϰ⧇āύ, interface āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧁āύāĨ¤
  • āϝāĻĻāĻŋ complex āϟāĻžāχāĻĒ (union, tuple, literal) āϞāĻžāĻ—āĻŦ⧇, type āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧁āύāĨ¤

ā§Š. āĻ•āĻŋ interface auto-merge āĻšā§Ÿ?

āωāĻ¤ā§āϤāϰ: āĻšā§āϝāĻžāρ, āĻāĻ•āχ āύāĻžāĻŽā§‡ āĻāĻ•āĻžāϧāĻŋāĻ• interface āĻĄāĻŋāĻ•ā§āĻ˛ā§‡ā§ŸāĻžāϰ āĻ•āϰāϞ⧇ TypeScript āϏ⧇āϗ⧁āϞ⧋ merge āĻ•āϰ⧇ āĻĻā§‡ā§ŸāĨ¤

interface A {
  x: number;
}
interface A {
  y: number;
}
 
// now A has x and y both

ā§Ē. āĻ•āĻŋ type extend āĻ•āϰāĻž āϝāĻžā§Ÿ?

āωāĻ¤ā§āϤāϰ: āĻšā§āϝāĻžāρ, āϤāĻŦ⧇ & āĻ…āĻĒāĻžāϰ⧇āϟāϰ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇āĨ¤

type A = { x: number };
type B = A & { y: number };

ā§Ģ. āĻĢāĻžāĻ‚āĻļāύ āϟāĻžāχāĻĒ āϏāĻ‚āĻœā§āĻžāĻžā§Ÿāύ⧇ āϕ⧋āύāϟāĻž āĻ­āĻžāϞ⧋?

āωāĻ¤ā§āϤāϰ: type āĻĻāĻŋā§Ÿā§‡ āĻĢāĻžāĻ‚āĻļāύ āϟāĻžāχāĻĒ āύāĻŋāĻ°ā§āϧāĻžāϰāĻŖ āϏāĻšāϜāĨ¤

type Add = (a: number, b: number) => number;

🔚 āωāĻĒāϏāĻ‚āĻšāĻžāϰ

type āĻāĻŦāĻ‚ interface āĻĻ⧁āχāϟāĻŋāχ āĻļāĻ•ā§āϤāĻŋāĻļāĻžāϞ⧀ āωāĻĒāĻžā§Ÿ āϟāĻžāχāĻĒ āϏāĻ‚āĻœā§āĻžāĻžā§Ÿāύ⧇āϰ āϜāĻ¨ā§āϝāĨ¤
āϤāĻŦ⧇ āϕ⧋āύāϟāĻŋ āϕ⧋āĻĨāĻžā§Ÿ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŦ⧇āύ āϏ⧇āϟāĻž āĻŦ⧁āĻā§‡ āϏāĻŋāĻĻā§āϧāĻžāĻ¨ā§āϤ āύ⧇āĻ“ā§ŸāĻžāχ āϏāĻŦāĻšā§‡ā§Ÿā§‡ āĻ­āĻžāϞ⧋āĨ¤

✅ āϏāĻ‚āĻ•ā§āώ⧇āĻĒ⧇:

  • interface → object structure, class, inheritance
  • type → āĻĢāĻžāĻ‚āĻļāύ, union, āϞāϜāĻŋāĻ•āĻžāϞ āĻ•āĻŽā§āĻŦāĻŋāύ⧇āĻļāύ