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

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.

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

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.

1interface IUserArg {
2  username : string,
3  email : string,
4  password : string
5}
6
7function loginUser({ username,email,password } :IUserArg) {
8        // Login Functionality comes Here
9
10    console.log(username)
11}
12
13loginUser({ 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.

1type IUserArg = {
2  username : string,
3  email : string,
4  password : string
5}
6
7function loginUser({ username,email,password } :IUserArg) {
8        // Login Functionality comes Here
9
10    console.log(username)
11}
12
13loginUser({ 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.

1interface Point {
2  x: number;
3  y: number;
4}
5
6interface SetPoint {
7  (x: number, y: number): void;
8}

1type Point = {
2  x: number;
3  y: number;
4};
5
6type 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.

1//declare the type for string
2type UserName = string
3
4//object with single number data type
5type point = { xCord : number } 
6
7//union
8type Xdata = point | UserName
9
10//tuple
11type 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,

1class Person {
2    name: string;
3    age: number;
4}
5class Child  extends Person {}
6
7class Man implements Person {}

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

Extends

1interface IUser {
2  name : string;
3    email : string;
4}
5
6class Admin extends IUser {
7        //Admin Class
8}
9
10type UserType = {
11  name : string,
12    email : string
13}
14
15class AdminRole extends UserType {
16        //logic
17}

Implements

1interface IUser {
2  name : string;
3    email : string;
4}
5
6class Admin implements IUser {
7        //Admin Class
8}
9
10type UserType = {
11  name : string,
12    email : string
13}
14
15class AdminRole implements UserType {
16        //logic
17}

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

1type TaskType {
2   name : string,
3   assigneeId: string
4}
5
6type ProjectType = TaskType | { projectId : string };
7
8// ERROR: can not implement a union type
9class Project implements ProjectType {
10}

Multiple Declaration

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

1interface IUser {
2   name : string;
3   role : string;
4}
5
6interface IUser {
7  email : string
8}
9
10// interface IUser { name: string;email: string;role: string }
11
12const 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.