TypeScript Interfaces Explained in 2 Minutes

My first article on dev.to, Yay! In this article, I'll show you what an interface is and how to create and use interfaces in your own projects.

As you may already know, JavaScript is not a type-safe language per definition. To get that cool type safety, you need to use tools like TypeScript to help you out.
TypeScript is a superset of JavaScript that introduces new features and helpful improvements to the JavaScript language.

By using TypeScript in your codebase, you can easily spot or avoid errors early and get rid of errors in compilation time which is pretty awesome. At first glance, TypeScript can seem hard and scary, but once you’ve spent some time with it, I’ll bet you that you’ll really love it.

Interfaces

An Interface in TypeScript acts more or less like a blueprint for an object. It defines information about property names in objects and their values. This can help out the TypeScript compiler in validating your objects, so you don’t define objects in the wrong format.

You define an interface by using the interface keyword in a typescript file (.ts). Take a look at the following example:

interface Course {
  title: string;
  description: string;
  createdAt: Date;
  updatedAt: Date;
  price: number;
  currency: string;
  isActive: boolean;
}

With this, you have defined an interface which can act like a blueprint for an object:

const webCourse: Course = {
  title: 'Typescript Basics',
  description: 'A course about Typescript',
  createdAt: new Date(),
  updatedAt: new Date(),
  price: 10,
  currency: 'USD',
  isActive: true
}

In interfaces, you can also specify any property as optional by using the ? or by adding undefined as a value.

interface Course {
  title: string;
  description: string;
  createdAt: Date;
  updatedAt: Date;
  price?: number; //Optional
  currency: string | undefined; //Optional
  isActive: boolean;
}

This means you can now create an object without a price and currency in this example:

const webCourse: Course = {
  title: 'Typescript Basics',
  description: 'A course about Typescript',
  createdAt: new Date(),
  updatedAt: new Date(),
  isActive: true
};

You can also have interfaces that extend other interfaces which can be quite useful sometimes.

interface BaseCourse {
  title: string;
  description: string;
  createdAt: Date;
  updatedAt: Date;
  price?: number; //Optional
  currency: string | undefined; //Optional
  isActive: boolean;
}

interface FootballCourse extends BaseCourse {
  coach: string;
}

As you can see here, we have defined a BaseCourse and FootballCourse. FootballCourse extends from the BaseCourse allowing us to utilize the BaseCourse interface and then just extending it with whatever properties we need

Another cool thing is that you can define properties as readonly, meaning that if you create an object and later on try to overwrite the property, the typescript compiler will throw an error as you have defined it as readonly:

interface BaseCourse {
  readonly title: string; //Read only
  description: string;
  createdAt: Date;
  updatedAt: Date;
  price?: number; //Optional
  currency: string | undefined; //Optional
  isActive: boolean;
}

interface FootballCourse extends BaseCourse {
  coach: string;
}

This will throw an error:

const webCourse: FootballCourse = {
  title: 'Typescript Basics',
  description: 'A course about Typescript',
  createdAt: new Date(),
  updatedAt: new Date(),
  isActive: true,
  coach: 'Nicky Christensen'
};

webCourse.title = 'A new title'; //ERROR

If you’d like to catch up with me sometime, follow me on Twitter | LinkedIn or simply visit my website (That is in Danish)