Type vs Interface in TypeScript: Complete Guide with Examples (Beginner to Advanced)

When working with TypeScript, one of the most common questions is:

🤔 Should I use type or interface?

Both are used to define the structure of data, but they behave differently in certain scenarios.

In this guide, you’ll learn:

  • What type and interface are
  • 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)

Featureinterfacetype
Object structure✅ Yes✅ Yes
Union types❌ No✅ Yes
Intersection types⚠️ Limited✅ Yes
Declaration merging✅ Yes❌ No
FlexibilityMediumHigh

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 & classes
  • type → 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)”

Leave a comment