When working with TypeScript, one of the most common questions is:
🤔 Should I use
typeorinterface?
Both are used to define the structure of data, but they behave differently in certain scenarios.
In this guide, you’ll learn:
- What
typeandinterfaceare - Key differences
- All important scenarios with examples
- When to use each (very important)
What is interface in TypeScript?
An interface is used to define the structure (shape) of an object.
Basic Example
interface User {
name: string;
age: number;
}
const user: User = {
name: "Raju",
age: 25,
};
What is type in TypeScript?
A type is more flexible and can define:
- Objects
- Primitives
- Unions
- Tuples
- Functions
Basic Example
type User = {
name: string;
age: number;
};
👉 Works similar to interface for objects
Key Differences (Quick Overview)
| Feature | interface | type |
|---|---|---|
| Object structure | ✅ Yes | ✅ Yes |
| Union types | ❌ No | ✅ Yes |
| Intersection types | ⚠️ Limited | ✅ Yes |
| Declaration merging | ✅ Yes | ❌ No |
| Flexibility | Medium | High |
Scenario 1: Object Definition
👉 Both work the same
interface User {
name: string;
}
type User = {
name: string;
};
✅ No major difference here
Scenario 2: Declaration Merging (Important)
✅ interface supports merging
interface User {
name: string;
}
interface User {
age: number;
}
👉 Result:
{
name: string;
age: number;
}
❌ type does NOT support merging
type User = {
name: string;
};
type User = {
age: number;
}; // ❌ Error
Scenario 3: Union Types
✅ Using type
type Status = "success" | "error" | "loading";
❌ interface cannot do this
👉 Not supported
Scenario 4: Intersection Types
✅ Using type
type Person = {
name: string;
};
type Employee = Person & {
salary: number;
};
⚠️ interface alternative
interface Person {
name: string;
}
interface Employee extends Person {
salary: number;
}
Scenario 5: Functions
✅ Using type
type Add = (a: number, b: number) => number;
✅ Using interface
interface Add {
(a: number, b: number): number;
}
Scenario 6: Extending / Inheritance
interface
interface Person {
name: string;
}
interface Employee extends Person {
salary: number;
}
type
type Person = {
name: string;
};
type Employee = Person & {
salary: number;
};
Scenario 7: Primitive Types
✅ Only type supports this
type ID = string | number;
👉 interface cannot do this ❌
Scenario 8: Tuples
type Point = [number, number];
👉 Only type supports tuples
Scenario 9: Working with Classes
interface (preferred)
interface User {
name: string;
}
class Person implements User {
name = "Raju";
}
When to Use interface
Use interface when:
- Defining object structure
- Working with classes
- Need declaration merging
- Building large applications
When to Use type
Use type when:
- Using unions (
|) - Using intersections (
&) - Working with primitives
- Advanced type logic
Best Practice (Very Important)
👉 Use both together:
type Status = "success" | "error";
interface ApiResponse {
status: Status;
data: string;
}
Common Mistakes
❌ Using interface for unions
interface Status = "success" | "error"; // ❌
❌ Overusing any
👉 Avoid losing type safety
❌ Confusion between both
👉 Use based on use case
Interview Tip
If asked:
“type vs interface?”
👉 Answer:
“Both define data shapes, but type is more flexible (supports unions, tuples), while interface supports declaration merging and is better for object-oriented design.”
Final Summary
- Both define structure of data
interface→ best for objects & classestype→ best for advanced types- Use both based on need
💡 Found this helpful? Subscribe to get simple TypeScript tutorials, interview questions, and real-world coding tips. Happy Coding!
Discover more from Learners Store
Subscribe to get the latest posts sent to your email.
One thought on “Type vs Interface in TypeScript: Complete Guide with Examples (Beginner to Advanced)”