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!