DEV Community

Cover image for Type, or Interface, That Is the Question
Leapcell
Leapcell

Posted on

9 1 1 1 1

Type, or Interface, That Is the Question

Cover

In TypeScript, both type and interface are used to define types, and in many cases, they are interchangeable. However, they have some key differences and specific use cases. Before diving into the distinctions between type and interface, let’s first look at their basic usage.

1. Basic Usage: Defining Object Types with type and interface

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

// Using type
type UserType = {
  name: string;
  age: number;
};

const user1: User = { name: 'Alice', age: 25 };
const user2: UserType = { name: 'Bob', age: 30 };
Enter fullscreen mode Exit fullscreen mode

In this example, both interface and type can define an object type, and there is almost no difference in usage.

2. Extension (Extend)

2.1 Extending interface

interface can be extended using inheritance:

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

interface Admin extends User {
  role: string;
}

const admin: Admin = {
  name: 'Alice',
  age: 30,
  role: 'Administrator',
};
Enter fullscreen mode Exit fullscreen mode

2.2 Extending type

type can be extended using intersection types:

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

type AdminType = UserType & {
  role: string;
};

const adminType: AdminType = {
  name: 'Bob',
  age: 35,
  role: 'Admin',
};
Enter fullscreen mode Exit fullscreen mode

Difference:

  • interface uses the extends keyword for inheritance.
  • type uses & (intersection types) for extension.

3. Declaration Merging

3.1 Declaration Merging with interface

interface allows multiple declarations with the same name. TypeScript will automatically merge their members.

interface User {
  name: string;
}

interface User {
  age: number;
}

const user: User = { name: 'Alice', age: 25 }; // The merged User interface includes both name and age properties.
Enter fullscreen mode Exit fullscreen mode

3.2 type Does Not Support Declaration Merging

type does not allow duplicate declarations, and doing so will result in an error.

type UserType = {
  name: string;
};

// Redeclaring the same type will throw an error
type UserType = {
  age: number; // Error: Duplicate identifier 'UserType'.
};
Enter fullscreen mode Exit fullscreen mode

Difference:

  • interface supports declaration merging, allowing multiple declarations to be combined.
  • type does not support declaration merging.

4. Union Types and Intersection Types

4.1 type Supports Union and Intersection Types

type supports defining union and intersection types, which interface does not.

// Union type
type Status = 'success' | 'error' | 'loading';

// Intersection type
type Name = { name: string };
type Age = { age: number };
type Person = Name & Age;

const person: Person = { name: 'Alice', age: 25 };
Enter fullscreen mode Exit fullscreen mode

4.2 interface Does Not Support Union Types

interface cannot directly define union types.

// Unsupported
interface Status = "success" | "error" | "loading"; // Error
Enter fullscreen mode Exit fullscreen mode

Difference:

  • type supports union and intersection types, making it more flexible when combining multiple types.
  • interface cannot define union types but can extend object types.

5. Type Aliases

type can define aliases for various types, including primitives, tuples, union types, etc.

// Defining basic type aliases
type ID = number | string;

// Defining a tuple type
type Point = [number, number];

const id: ID = 123;
const point: Point = [10, 20];
Enter fullscreen mode Exit fullscreen mode

interface, on the other hand, can only define object types.

6. Implementation (Implements) and Extension (Extends)

6.1 interface for Class Implementation

interface can constrain the structure of a class.

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

class Person implements User {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
Enter fullscreen mode Exit fullscreen mode

6.2 type Can Also Constrain Classes

Although interface is commonly used for this purpose, type can achieve similar functionality.

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

class PersonType implements UserType {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
Enter fullscreen mode Exit fullscreen mode

Difference:

  • interface is more commonly used in class design due to its ability to merge declarations and extend types more naturally.
  • type can also constrain classes but is more suited for defining unions and complex type compositions.

7. Interoperability

7.1 interface and type Can Be Mixed

interface and type can be combined in practice. For example, an interface can extend a type and vice versa.

type Name = { name: string };

interface User extends Name {
  age: number;
}

const user: User = { name: 'Alice', age: 25 };
Enter fullscreen mode Exit fullscreen mode

7.2 type Can Extend interface

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

type Admin = User & {
  role: string;
};

const admin: Admin = { name: 'Bob', age: 35, role: 'Admin' };
Enter fullscreen mode Exit fullscreen mode

Difference:

  • interface can extend type, and type can extend interface, allowing them to be combined flexibly.

8. Expressing Complex Types

8.1 type Offers Greater Expressive Power

Since type supports union types, intersection types, and type aliases, it is more flexible for defining complex type compositions.

type ComplexType = string | number | { name: string };

const value1: ComplexType = 'Hello'; // Valid
const value2: ComplexType = 123; // Valid
const value3: ComplexType = { name: 'Alice' }; // Valid
Enter fullscreen mode Exit fullscreen mode

8.2 interface Is Better for Object Structures

interface focuses on describing object structures and is less suitable for union or complex type combinations.

9. Summary of Use Cases

When to Use interface:

  • Defining object types, especially in object-oriented design.
  • Constraining classes with implements.
  • Scenarios requiring declaration merging (e.g., third-party library type definitions).

When to Use type:

  • Defining union types, intersection types, and other complex compositions.
  • Creating aliases for primitive types and tuples.
  • Scenarios requiring more flexibility in combining types.

Conclusion

interface

  • Defining object types: ✅
  • Alias for basic types: ❌
  • Declaration merging: ✅
  • Extension: extends inheritance
  • Union types: ❌
  • Intersection types: ❌
  • Class implementation: ✅
  • Expressive capability: Suitable for object structure definitions
  • Common use case: Object-oriented design, combining classes with interfaces

type

  • Defining object types: ✅
  • Alias for basic types: ✅
  • Declaration merging: ❌
  • Extension: & intersection types
  • Union types: ✅
  • Intersection types: ✅
  • Class implementation: ✅ (but less common)
  • Expressive capability: Suitable for complex type compositions
  • Common use case: Union types, complex type definitions, type aliases, etc.

Overall, interface is more suitable for object-oriented programming, especially in class design and inheritance. On the other hand, type is more flexible and is ideal for scenarios involving more complex type compositions and type aliases. In most projects, interface and type can be used complementarily.


We are Leapcell, your top choice for hosting Node.js projects.

Leapcell

Leapcell is the Next-Gen Serverless Platform for Web Hosting, Async Tasks, and Redis:

Multi-Language Support

  • Develop with Node.js, Python, Go, or Rust.

Deploy unlimited projects for free

  • pay only for usage — no requests, no charges.

Unbeatable Cost Efficiency

  • Pay-as-you-go with no idle charges.
  • Example: $25 supports 6.94M requests at a 60ms average response time.

Streamlined Developer Experience

  • Intuitive UI for effortless setup.
  • Fully automated CI/CD pipelines and GitOps integration.
  • Real-time metrics and logging for actionable insights.

Effortless Scalability and High Performance

  • Auto-scaling to handle high concurrency with ease.
  • Zero operational overhead — just focus on building.

Explore more in the Documentation!

Try Leapcell

Follow us on X: @LeapcellHQ


Read on our blog

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (3)

Collapse
 
pengeszikra profile image
Peter Vivo

Great investigation of interface vs. type question. I think fare enough to use type. Because the only advantage of interface is the merge. But as reviwer perspective merge may source of error because that way is enable to use two different type in a one file and the second one is not redeclaration instead merged one. Did you tested this problem?

Collapse
 
asmyshlyaev177 profile image
Alex

Informative. Stumbled on difference between type and interfaces recently, types behave more predictably, at least for my use case.

Collapse
 
wizard798 profile image
Wizard

Really nice article, covering all topics for both of them

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay