Ajay's blog
TypeScript | Type Aliases | Interface

TypeScript | Type Aliases | Interface

Ajay's photo
Ajay
·

3 min read

Introduction

Type Aliases and Interfaces help us to write reusable type definitions, and it is crucial for a developer to write reusable code.

Also, there are other advantages like clean and readable code.

Write re-usable types

Let's say we are submitting a form to a server. We display a form status message to the user if the form is submitted successfully or if something went wrong.

We declare a variable formStatus that can have three values: Pending, Successful or Error .


async function submitForm(){
  let formStatus : 'Pending' | 'Successful' | 'Error';      
  try{
    formStatus = "Pending" ;
    await axios.post('url', anyFormData); // submit formdata to a server
    formStatus = "Successful" ;
  }catch(error){
    formStatus = 'Error';
  }
}

Now, let's suppose we have many forms in our application like login form, and registration form. In all the form submissions, we need to display the form status to the user.

We have to declare formStatus variable with the same type of definitions in all forms, and it is the repetition of the same code.

Type aliases help us here. Let's write the above code with type aliases.

// define type defination using type aliases
type StatusType =  'Pending' | 'Successful' | 'Error'; 

async function submitForm(){
  let formStatus : StatusType; //formStatus is type of StatusType       
  try{
    formStatus = "Pending" ;
    await axios.post('url', anyFormData); // submit formdata to a server
    formStatus = "Successful" ;
  }catch(error){
    formStatus = 'Error';
  }
}

In the above code, you can see that it's more clear and readable than before.

Let's take it further. We can create a separate file, types.ts , for storing type definitions, and we will export types from this file so that we can use them in other forms.

types.ts

export type StatusType =  'Pending' | 'Successful' | 'Error';

Now, we can use the above type definitions in other places, we don't need to define it again. We can simply import it.

Write cleaner code

We can also use type aliases to define an object in a cleaner way.

// without using type aliases, not so readable, but verbose
const user : { name:string, isAdmin: boolean, age:number} = {
    name: "Jhon",
    isAdmin: false,
    age: 22
};

type User = {
    name:string;
    isAdmin: boolean;
    age: number;
}

// using type aliases more cleaner and readable
const user: User = {
    name: "Jhon",
    isAdmin: false,
    age: 22
};

Interface

Interface is used to describe only objects.

interface Point {
    x : number
    y : number
}

const p : Point = { x : 1, y : 4 }

Type aliases and interfaces provide almost the same capabilities. However, there is a difference between them. We can not add any field dynamically to a type definition, but we can do that with interfaces.

We can declare an interface more than once, and TypeScript will merge all the declarations into a single declaration.

interface Person = {
    name: string;
}

interface Person = {
    age: number;
}

// both of the above declration merged 
// interface Person { name: string; age : number }
const p : Person = { name: "Jhon", age: 22 }


// type declrations don't merge together
type Person = {
    name: string
}

type Person = {
    age : number
}

const p : Person = {name: "Jhon", age: 22 }; // Error

I hope you find this article useful. If you have any suggestions that can make this article better, please write in the comment section, I would be happy to learn from you.

TypeScriptTypes