TypeScript is an open-source language which acts as superset of JavaScript, plus static typing to the language.

By having static typing to the language, it providing better documentation and enable type-checking at compile time when transcompiles to JavaScript.

One of TypeScript's principles is that type-checking focuses on the shape that values have. Thus, TypeScript has Interfaces to fill the role of naming these types.

TypeScript also has several basic types such as string, boolean and number which can be referred here. However, if we want to create a new or advanced types, TypeScript has Type Aliases for that purpose.

Sometimes, Type Aliases is similar to Interfaces. However, both have different purposes and use-cases in TypeScript.

Table of contents

• Types Aliases
• Interfaces
• Comparison between Types Aliases and Interfaces
  • 1. Object / Function
  • 2. Other Type
  • 3. Extend
  • 4. Implements
  • 5. Declaration Merging
• Types Aliases and Interfaces Comparison Table
• References

Type Aliases

Types Aliases is used to create a new name for a type. It provides a way to name primitives, unions, tuples and any other types.

Keyword type is used to define Type aliases.

For example,

type Hour = number;

let timeInHour: Hour = 10;
console.log(typeof timeInHour);
// Output: [LOG]: number

let time: Hour = 12;
console.log(typeof time);
// Output: [LOG]: number

Based on the example, aliasing does not create a new type, but to create a new name to refer to other type.

Interfaces

Interfaces is used to describe data shapes such as an object to provides type-checking on the shape that values have. Therefore, interfaces are a way to defining contracts within the code as well contract with code outside the project.

Keyword interface is used to define interfaces.

For example,

interface Book {
  author: string;
  title: string;
}

let book1: Book = {
  title: "Cracking the Coding Interview",
  author: "Gayle Laakmann McDowell",
};

console.log(typeof book1);
// Output: [LOG]: object

console.log(book1);
// Output: [LOG]: { "title": "Cracking the Coding Interview", "author": "Gayle Laakmann McDowell" }

Based on the example, interfaces provides the powerful way to define entities.

Comparison between Types Aliases and Interfaces

Following is the list of differences of type aliases and interfaces.

1. Object / Function

Both can be used to describe the shape of an object or a function signature. But the syntax differs.

Type alias

type Point = {
  x: number;
  y: number;
};

type SetPoint = (x: number, y: number) => Point;

Interface

interface Point {
  x: number;
  y: number;
}

interface SetPoint {
  (x: number, y: number): Point;
}

2. Other Type

Only type alias can be used for other types such as primitives, unions and tuples.

// Primitive
type Name = string;

// Object
type PartialPointX = { x: number };
type PartialPointY = { y: number };

// Union
type PartialPoint = PartialPointX | PartialPointY;

// Tuple
type Data = [number, string];

3. Extend

Both can be extended, but the syntax differs. Moreover, an interface and type alias are not mutually exclusive. Thus, an interface can extend a type alias and vice versa.

Interface extends interface

interface PartialPointX {
  x: number;
}
interface Point extends PartialPointX {
  y: number;
}

Type alias extends type alias

type PartialPointX = { x: number };
type Point = PartialPointX & { y: number };

Interface extends type alias

type PartialPointX = { x: number };
interface Point extends PartialPointX {
  y: number;
}

Type alias extends interface

interface PartialPointX {
  x: number;
}
type Point = PartialPointX & { y: number };

Implements

A class can implement an interface or type alias. However, they cannot implement/extend a type alias that names a union type.

interface Point {
  x: number;
  y: number;
}

class SomePoint implements Point {
  x = 1;
  y = 2;
}

type Point2 = {
  x: number;
  y: number;
};

class SomePoint2 implements Point2 {
  x = 1;
  y = 2;
}

type PartialPoint = { x: number } | { y: number };

/*
 * ERROR:
 * A class can only implement an object type or
 * intersection of object types with statically known members.(2422)
 **/
class SomePartialPoint implements PartialPoint {
  x = 1;
  y = 2;
}

5. Declaration Merging

Only interface can be defined multiple times and will be treated as a single interface (with members of all declarations being merged).

// These two declarations become:
// interface Point { x: number; y: number; }
interface Point {
  x: number;
}
interface Point {
  y: number;
}

const point: Point = { x: 1, y: 2 };

Types Aliases and Interfaces Comparison Table

Below is the summary of comparison between type alias and interface.

References

• TypeScript Official Website; typescriptlang.org
• Types vs. interfaces in TypeScript; logrocket.com
• TypeScript Type vs Interface; educba.com
• TypeScript: Interfaces vs Types; stackoverflow.com