DEV Community

Manthan Ankolekar
Manthan Ankolekar

Posted on

10

Typescript type vs interface

In TypeScript, both type and interface are used to define shapes of objects or types. They seem similar in functionality, but they have some differences in how they can be used and extended.

Interfaces:

Interfaces are used to define the structure or shape of an object. They can describe the contract that other classes or objects must adhere to. They are also capable of being extended or merged.

// Interface example
interface Person {
  name: string;
  age: number;
}

// Implementing the interface
const person: Person = {
  name: 'Alice',
  age: 30,
};
Enter fullscreen mode Exit fullscreen mode

Types:

Types are used to create aliases for different types in TypeScript. They allow you to create a name for any valid type, including built-in types, union types, intersection types, and more. Types are flexible and can represent complex types using intersections, unions, and conditional types.

// Type example
type Point = {
  x: number;
  y: number;
};

// Using the type alias
const point: Point = {
  x: 10,
  y: 20,
};
Enter fullscreen mode Exit fullscreen mode

Differences:

Extending/merging:

  • Interfaces support declaration merging. If you declare two interfaces with the same name, TypeScript merges them into one.
  • Types can be used in combination through intersection (&) or union (|) but cannot be extended or merged in the same way as interfaces.

Syntax:

  • Interfaces use the interface keyword.
  • Types use the type keyword.

Declaration:

  • Interfaces are more suitable for defining object shapes, contracts, or classes that implement them.
  • Types are more versatile and can define not only object shapes but also union types, intersection types, conditional types, and more.

When to use which:

Use interface when:

  • Defining contracts for objects, classes, or their shapes.
  • Needing declaration merging or extending existing types/contracts.

Use type when:

  • Creating a union, intersection, or any other complex type.
  • Defining aliases for primitive types, unions, intersections, or complex types to improve code readability.

In many cases, both interfaces and types can accomplish the same tasks, and choosing between them often comes down to personal preference or specific needs within a codebase. There are no strict rules dictating when to use one over the other.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (2)

Collapse
 
brense profile image
Rense Bakker

Strict rules no, but in general the recommendation is to use interfaces when writing class-based code and types in all other cases. Types have one big advantage though, because they can extend other types and interfaces, but interfaces cannot always extend types.

Collapse
 
framemuse profile image
Valery Zinchenko

I don't think that's a big but a feature, so you don't mess up with interfaces too much.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Value this insightful article and join the thriving DEV Community. Developers of every skill level are encouraged to contribute and expand our collective knowledge.

A simple “thank you” can uplift someone’s spirits. Leave your appreciation in the comments!

On DEV, exchanging expertise lightens our path and reinforces our bonds. Enjoyed the read? A quick note of thanks to the author means a lot.

Okay