Types vs Interfaces in Typescript

Here is a million-dollar question from the mouth of every aspiring typescript developer like myself is that "What is the difference between Types and Interfaces?"

Well, worry no more because this article comes to rescue all of you from this wild west of constant thinking.

We'll go into the differences between the two but first let's step back and rewind to what they are.

What are Types and Interfaces?

Well, Typescript performs what we called static checking i.e., it detects errors in our code without running it and these types or we can say type annotations play a big role in that process.

Types are defined as "kind of data" which simply means what data can be stored or can be provided as input or can be returned as output to or from a function respectively. These are just a few examples of where types can be used.

  type Point = {
      x: number,
      y: number,
  }
  const greet: string = "Hello";
  const myAge: number = 9;
  const isHappy: boolean = true;
  const fruits: string[] = ["apple", "oranges", "grapes"];
  const myUndefined: undefined = undefined;

At first, Interfaces may seem just like types but it's different in a lot of ways. Interfaces define the specifications of entities, it specifies the what but doesn't specify the how. An interface contains the name of all the properties along with their types. It also includes the type of arguments and return type of functions.
```
  interface Person {
      readonly id: number,
      name: {
          firstName: string,
          lastName: string,
      },
      age: number,
      nickname?: string,
      getFullName(first: string, last: string): string,
  }
```

Now the Differences

An interface can only describe the shape of an object but types can be defined for others as well like literal types.

// interface defining shape of an object
interface Person {
    name: string,
    age: number,
}

// types
type color = "red" | "blue"

Reopening to add new properties

Interfaces can be reopened to add new properties after we already described an interface

  // Interfaces
  interface Point {
      x: number,
  }
  interface Point {
      y: number,
  }
  // Perfectly okay
  // Not replacing just adding new properties
  const coordinates: Point = {
      x: 5,
      y: 7,
  }

Typescript will complain if try to add new properties later after we already described a type.

  // Types
  type Point = {
      x: number,
  }
  // Error! Ts will complain about duplicate types
  type Point = {
      y: number,
  }
  // Error! y dosen't get added to Point type
  const coordinates: Point = {
      x: 5,
      y: 7,
  }

Extending Properties (Inheritance) - different syntax

extending interfaces is a more object-oriented kind of approach.

  interface FirstName {
      firstName: string,
  }
  interface LastName {
      lastName: string,
  }
  // multiple inheritance
  interface Person extends FirstName, LastName {
      age: number,
  }
  const person: Person = {
      firstName: "shreyansh",
      lastName: "kourav",
      age: 24,
  }

extending types

  type Name = {
      name: string,
  }
  type Person = Name & {
      age: number,
  }
  const person: Person = {
      name: "shreyansh",
      age: 24,
  }
  // multiple inheritance is also possible in typesConclusion

Conclusion

In this article, we learned about the differences between types and interfaces in typescript. In short types and interfaces can be used to solve the same problem and it's up to you whether to use one or the other it really is a personal preference. For me when dealing with objects I tend toward interfaces than types. Thank you for reading to the very last I hope this article might have added some value to your vast ocean of knowledge.