What to Choose Type VS Interface in Typescript?

Last month, I was on a mission to level up my JavaScript skills by diving into TypeScript. I finished the tutorials and felt like I grasped the concepts, but that was just the beginning, right? To truly solidify my learning, I decided to tackle a real-world project: building an e-commerce website using the MERN stack (MongoDB, Express, React, and Node.js). Since I was all-in on TypeScript, I wanted to incorporate it throughout the project.

But then I hit a snag. While creating an object, I got stuck on a question: type or interface?
Down the rabbit hole, I went, researching the difference between these two TypeScript constructs. And guess what? That research became my real learning! It’s one thing to understand the theory, but applying it to a practical project takes things to a whole new level.

So, to save you from going down the same research rabbit hole, let’s break down the key differences between types and interfaces in TypeScript. With this knowledge in your back pocket, you’ll be able to make informed decisions for your own projects!

Phase One: Interfaces Are the Bomb

In the early days, interfaces were the favored option. The TypeScript Performance Wiki even claimed that interfaces were faster than types. It was believed that interfaces could boost the speed of the TypeScript type checker, making them ideal for performance-critical projects. However, interfaces had their limitations, primarily being designed for objects and functions.

// Using an interface
interface Point {
  x: number;
  y: number;
}

// Using a type
type Coordinates = {
  x: number;
  y: number;
};

Phase Two: Consistency Is Key

Phase Two introduced a different perspective: the choice between types and interfaces doesn’t matter as long as you maintain coding consistency. This viewpoint encouraged using interfaces for objects and types for other constructs, sparking debates in the TypeScript community.

Interface Inheritance

One key advantage of interfaces is their ability to inherit from other interfaces, a feature not easily achieved with types.

interface Shape {
  color: string;
}

interface Circle extends Shape {
  radius: number;
}

For those who don’t know why we use extends in interfaces, it's basically used to inherit all the properties from another interface.

3 . Types: Fixed once defined, Interfaces are extendable(re-opened)

In type we can’t extract the properties from different object.

A type cannot be changed after being created

type Window = {
  title: string;
}

type Window = {
  ts: TypeScriptAPI;
}

 // Error: Duplicate identifier 'Window'.

• If you only need to add a few well-defined properties, intersection types offer a concise solution.
• Syntax: type ExtendedType = BaseType & { newProperty1: type1, newProperty2: type2 }

//Extending a type via intersections

type Animal = {
  name: string;
}

type Bear = Animal & { 
  honey: boolean;
}

const bear = getBear();
bear.name;
bear.honey;

const bear: Bear = { name: 'Yogi', honey: true };
console.log(bear.name); // Output: Yogi
console.log(bear.honey); // Output: true

but now using the Interface it can be achievable in a few steps

// Adding new fields to an existing interface

interface Window {
  title: string;
}

interface Window {
  ts: TypeScriptAPI;
}

Conclusion: Making the Right Choice

In Phase Three, the ultimate recommendation is to use types unless you specifically need features provided by interfaces. Types offer predictability and are less likely to exhibit unexpected behavior. Importantly, there is no discernible performance difference between types and interfaces.

Consider Your Needs

Your choice between types and interfaces should align with your project’s unique requirements and your personal coding style. If you need inheritance, want to extend another type, or come from an object-oriented programming background, interfaces may be your preferred choice. However, if predictability and control are your priorities, types are the more suitable option.

In summary, there is no one-size-fits-all solution. Your choice should be guided by your project’s demands and your familiarity with TypeScript’s intricacies.

So, the next time you face the decision of types vs. interfaces in TypeScript, remember this post. Let it guide you in making an informed choice that best fits your coding style.

Happy coding! Like, Follow, and stay tuned for more enlightening content.