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 };
đ§Ē āĻĒā§āϰā§āϝāĻžāĻāĻāĻŋāϏ āĻĒā§āϰāĻŦāϞā§āĻŽ
āĻĒā§āϰāĻļā§āύ:
āĻāĻĒāύāĻžāĻā§ āĻĻā§āĻāĻŋ āĻāĻžāĻāĻĒ āϤā§āϰāĻŋ āĻāϰāϤ⧠āĻšāĻŦā§:
- Person â name (string), age (number)
- 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, āϞāĻāĻŋāĻāĻžāϞ āĻāĻŽā§āĻŦāĻŋāύā§āĻļāύ