Typescript for Rescue

To avoid uninvited errors and spending hours in debugging issue, comes typescript for rescue.

In this article, we will see two examples, where TypeScript comes for rescue.

Here, we will be using jsonplaceholder apis to demonstrate with examples.

TL;DR #

• TypeScript helps in identify the code errors at the development time.
• Using Type System, interfaces, enums from TypeScript are used to improve code development.

Where Does JS Fail? #

• JavaScript is a dynamically typed programming language. We dont know what we fetch from the APIs until we get it or we face an error.
• JavaScript’s code fails silently in many cases. Which can be sometimes annoying.
• Code written in JavaScript is difficult to debug.

Let’s understand where javascript fails with an example.

Let’s Fetch Some Data Using axios #

Let’s fetch todos data from jsonplaceholder.

The data we want to fetch is

curl https://jsonplaceholder.typicode.com/todos/1

CURL response

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

What’s Wrong With JS Code? #

JS Failure 1 #

Now, let fetch this data using javascript. Example:

import axios from "axios";

const url = 'https://jsonplaceholder.typicode.com/todos/1';

axios.get(url).then(response => {
  const data = response.data;

  console.log(`
    id: ${data.ID}
    title: ${data.title}
    completed: ${data.completd}
  `);
});

When we run the above code, it will run perfectly fine. But if you look closely, ID in caps and there is typo in completd while fetching json response.

Output

➜  whiletrue-typescript ts-node index.ts

    id: undefined
    title: delectus aut autem
    completed: undefined
  

JS Failure 2 #

Let’s refactor logging in the above code and put it in a separate function. like shown below,

import axios from "axios";

const url = 'https://jsonplaceholder.typicode.com/todos/1';

axios.get(url).then(response => {
  const data = response.data;
  logTodo(data.title, data.id, data.completed)
});

const logTodo = (id, completed, title) => {
  console.log(`
    id: ${id}
    title: ${title}
    completed: ${completed}
  `);
};

The above code is syntactically correct. And it runs just fine. Let’s look at the output below.

➜  whiletrue-typescript ts-node index.ts

    id: delectus aut autem
    title: false
    completed: 1

The output isn’t seem right.

Heil TypeScript #

The above examples are just part of the issues working with JS. TypeScript is developed to overcome this kind of issues.

TS Solution For JS Failure 1 #

In typescript, we can define interface (a prototype of a class) and use it with json object.

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

Let’s fetch data like we did and log in the console. And let’s do same mistake as in JS Failure 1 example

import axios from "axios";

const url = 'https://jsonplaceholder.typicode.com/todos/1';

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

axios.get(url).then(response => {
  const data = response.data as Todo;
  const id = data.ID;
  const title = data.title;
  const completed = data.completed;

  console.log(`
    id: ${id}
    title: ${title}
    completed: ${completed}
  `)
});

Notice that, the editor is able to catch the error at the development time in the below image.

TS Solution For JS Failure 2 #

Here, TypeScript Type-System comes handy to avoid JS Failure 2 kind of issues to some extent. In typescript, we can provide type of data a function expects at the time of function definition. The below code can explain better,

import axios from "axios";

const url = 'https://jsonplaceholder.typicode.com/todos/1';

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

axios.get(url).then(response => {
  const data = response.data as Todo;
  const id = data.id;
  const title = data.title;
  const completed = data.completed;

  logTodo(id, title, completed)

});

const logTodo = (id: number, title: string, completed: boolean) => {
  console.log(`
    id: ${id}
    title: ${title}
    completed: ${completed}
  `)
};

Here, closely look at the logTodo function definition. We have annotated the parameters with the type using TypeScript Syntax.

Conclusion #

In this article, we have seen how javascript can fail in unexpected ways and the need to TypeScript to tackle those issues.