Types and Interfaces in TypeScript

Introduction

With the ever growing popularity of TypeScript in the field of software development, more and more developers are jumping on the bandwagon and picking up this new language. Thanks to TypeScript's ability to catch errors during development, ensuring better code quality, it's no secret why it's becoming a much more desirable tool for web developers to possess.

TypeScript is actually relatively easy to pick up (if you have experience with JavaScript). One of the first things most developers encounter when learning TypeScript for the first time are types and interfaces. The concept is pretty straightforward: type and interfaces are used for structures for variables, but since they serve the same purpose, what exactly sets them apart?

Types

Types are how we describe what type of data a variable should represent. There are multiple types in TypeScript, and you can even make your own. Here is an example of a variable that represents a numeric type:

let age: number = 30;

We can even create our own types and use them in variables using the type declaration:

type dob = { 
  day: number;
  month: number; 
  year: number;
}

let birthday: dob = { 
  day: 17, 
  month: 5, 
  year: 1995 
}

Interfaces

Interfaces are similar to types in the sense that they can be used to define data, but interfaces are commonly used to define objects. While types can be used to define objects as well, interfaces include more features than types such as index signatures, the extends keyword, and compatibility with the implements keyword for classes. Hence, why interfaces are a much more popular choice for defining objects. Here are a few examples of interfaces in action:

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

let kyle: Person = {
  name: "Kyle",
  age: 16
}

Replacing our interface with a type would still work, but like I mentioned earlier, there are certain features that interfaces possess that types don't. Let's look at index signatures in action:

interface Quantities {
  [key: string]: number;
}

let inventory: Quantities = {
  apples: 20,
  oranges: 15,
  bananas: 12
}

Let's look at an interface that leverages extends:

interface Pet {
  name: string;
}

interface Dog extends Pet {
  breed: string;
}

let myDog: Dog = {
  name: "Rosie",
  breed: "dachshund"
}

These are just two of many features that interfaces provides.

What should I use?

To be completely honest, it's up to you. If you are not expecting to use much of the extra functionality that interfaces offer, types might be fine. If you're working on a larger app that is heavily leveraging classes, including the functionality that comes with classes, interfaces might be a better fit. In the end, experience is the best teacher. As you build more apps with TypeScript, you will develop a better understanding of types and interfaces, including how and when to use them.