Frontend Weekly
Published in

Frontend Weekly

Typescript Advanced Types

In this article, we will mostly talk about interfaces. Before we get into that, I’d like to get a couple of terminologies out of our way. I believe that addressing them will give us a better understanding of interfaces. What I’d like to talk about before interfaces is Type aliases .

Type Aliases:

If you read all the articles that I published under Typescript the series so far, you must have been familiar with the object and union types. If you haven’t known them yet, I am urging you to read through those types first before jumping into interfaces . With that said, I’d like to give you a brief explanation of Type Aliases .

Type Aliases allow you to create a new name for an existing type. In order words, there are times when we need to use same type over and over again. In these times, Type Aliases can come to rescue. Not only will save us time but also it will help us make less mistakes when we need to change the type all over the code. You can think of it as defining variable.

I am sure, seeing it in the example gives us a better idea. Here is the syntax of Type aliases

Another important thing that we have to keep in mind is that using Type Aliases is not limited to object .You can use them with any kind of type. Let’s look at that example:

I want to emphasize that we use Type aliases to define new names for existing types in Type system.


We have just learned that it was possible to define a new name for an object. Interface are introduced as another way to make it happen in typescript.

Interfaces may only be used to declare the shapes of objects, not rename primitives. The only way to rename primitives is to use type aliases.

Before getting into the differences between Type aliases and interfaces , i’d like to introduce its syntax to you.

As you can see, the only change I have done is to change type with interface . Even though they seem to have worked the same way, there are differences between them.

Difference between type aliases and interfaces:


  1. ) extend keyword needs to be used if you want to extend an interface
  2. ) & keyword called intersection needs to be used to extend a type in type aliases

Adding new fields ( declaration merging):

  1. ) interface can be reopened to add new properties and expand the definition of the type.
  2. ) type aliases can not be changed after being created.

Rename primitives:

  1. ) interface can only be used to name an object not primitives.
  2. ) type aliases can rename primitives as well as objects.

I tried to go through most of the important types we need to know before writing typescript code so far. In the next article, I will give a real-life example to internalize all the types we have learned so far.



It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store