TypeScript Interfaces vs Types

In this article, we will see what are interfaces and types and the difference between them with few important points.

Recent Articles

Typescript Enums - Deep Dive

Interface

Interfaces are the way to type-check custom data types. For example, Typescript provides primitive data types that can be used for type-check.

But in some situation, you may need to check the type of an object or function.

function loginUser({ username, email, password }) {
  // Login Functionality comes Here
}

How can we check the type of object which contains username , email and password . Well, we can use Interface to check the type of it.

interface IUserArg {
  username: string;
  email: string;
  password: string;
}

function loginUser({ username, email, password }: IUserArg) {
  // Login Functionality comes Here

  console.log(username);
}

loginUser({ username: "ganesh", email: "ganesh@gmail.com", password: "12345" });

this is one of the use-cases of Interfaces in Typescript. Similarly, we can use it for function type-check and class implementation.

Types

Types are similar to interfaces. let’s see the implementation first and see the difference between both of them.

type IUserArg = {
  username: string;
  email: string;
  password: string;
};

function loginUser({ username, email, password }: IUserArg) {
  // Login Functionality comes Here

  console.log(username);
}

loginUser({ username: "ganesh", email: "ganesh@gmail.com", password: "12345" });

Interfaces vs Types

Let’s see the difference between interfaces and types in typescript.

Syntax

First and foremost, the syntax between types and interfaces are different to implement them in typescript.

we use type to declare a type and interface to declare interfaces in typescript.

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

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

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

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

Usability

Interfaces can be used mainly for data types that are object or custom data types whereas types alias can be used for all the data types such as primitives,unions and tuples.

//declare the type for string
type UserName = string;

//object with single number data type
type point = { xCord: number };

//union
type Xdata = point | UserName;

//tuple
type Value = [point, UserName];

unfortunately, we can’t do that in interfaces.

Extends & Implements

Before getting into the difference, let’s recap what are extend and implements.

extends is used in child classes. when we want to inherit some properties from the parent class. we should use extends .

implements is used to use some methods from a class which is not a parent class. it is same as the implements class. a good example would be,

class Person {
  name: string;
  age: number;
}
class Child extends Person {}

class Man implements Person {}

Both Interface and type can extends and implements except in one case.

Extends

interface IUser {
  name: string;
  email: string;
}

class Admin extends IUser {
  //Admin Class
}

type UserType = {
  name: string;
  email: string;
};

class AdminRole extends UserType {
  //logic
}

Implements

interface IUser {
  name: string;
  email: string;
}

class Admin implements IUser {
  //Admin Class
}

type UserType = {
  name: string;
  email: string;
};

class AdminRole implements UserType {
  //logic
}

One scenario where Type Alias implements won’t work. i.e, when you can type with union

type TaskType {
   name : string,
   assigneeId: string
}

type ProjectType = TaskType | { projectId : string };

// ERROR: can not implement a union type
class Project implements ProjectType {
}

Multiple Declaration

Unlike a type alias, an interface can be defined multiple times and it will be considered as a single interface.

interface IUser {
  name: string;
  role: string;
}

interface IUser {
  email: string;
}

// interface IUser { name: string;email: string;role: string }

const user: IUser = { name: "John", email: "john@gmail.com", role: "ADMIN" };

Summary

Choosing an interface and type alias depends on the requirement that we have. Though, it won’t be a critical problem. it helps you to make your code readable and maintainable. So, it’s important to make it maintainable.

• Syntax
• Usability
• Extends & Implements
• Multiple Declaration

would be factor which differs between interface and types.