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

// it is written without type aliases 
function printCoord(pt: {
  x: number;
  y: number;
}) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}

function getCoords(pt: {
  x: number;
  y: number;
}) {
   return `${pt.x} ${pt.y}`
}
 
printCoord({ x: 100, y: 100 });
getCoords({ x: 100, y: 100 });
..............................................................................

// it is written with type aliases
type Point = {
  x: number;
  y: number;
};
 
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
function getCoords(pt: Point) {
   return `${pt.x} ${pt.y}`
}
 
printCoord({ x: 100, y: 100 });
getCoords({ x: 100, y: 100 });

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:

type ID = number | string;
type name = string;

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

Interfaces:

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.

// it is written with type aliases
interface Point = {
  x: number;
  y: number;
};
 
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
function getCoords(pt: Point) {
   return `${pt.x} ${pt.y}`
}
 
printCoord({ x: 100, y: 100 });
getCoords({ x: 100, y: 100 });

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:

Extending:

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

interface Vehicle {
  licenceNumber: string
}

interface Car extends Vehicle {
  theNumberOfDoors: number
}

const car: Car = {licenceNumber: "test", theNumberOfDoors: 4}
car.licenceNumber
car.theNumberOfDoors

.................................

type Vehicle = {
  licenceNumber: string
}

type Car = Vehicle & { 
  theNumberOfDoors: number 
}

const car = getCar();
bear.licenceNumber;
bear.theNumberOfDoors;

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.

interface Vehicle {
  licenceNumber: string
}

interface Vehicle {
  type: string
}

const vehicle: Vehicle = {licenceNumber: "test", type: "test"}

................................

// Dublicate identifier error
type Vehicle {
  licenceNumber: string
}

type Vehicle {
  type: string
}

Rename primitives:

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

type NewString = string
type EvenNumber = number

// An interface cannot extend a primitive type like 'string';
// an interface can only extend named types and classes

interface X extends string {

}

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.