Scripting from Javascript to Typescript

Why

Scripts typically require some level of tinkering and tweaking to get the desired output. If written in Javascript, developers have to remember the shape of input and output. I personally have to log output to recall what I'm getting as a response. By now, most of the Javascript community is aware of the perks of switching to Typescript. If you'd like a refresher, visit Serokell's post

What are we making?

We are going to take input from the covid tracking api and format it in a slightly different way to prepare to graph it on a chart. Here is an example of a day's US output

Sample Input

[
 {
   "date":20200916,
   "states":56,
   "positive":6597783,
   "negative":81976741,
   "pending":10587,
   "hospitalizedCurrently":30278,
   "hospitalizedCumulative":390624,
   "inIcuCurrently":6308,
   "inIcuCumulative":18961,
   "onVentilatorCurrently":1651,
   "onVentilatorCumulative":2090,
   "recovered":2525573,
   "dateChecked":"2020-09-16T00:00:00Z",
   "death":188802,
   "hospitalized":390624,
   "lastModified":"2020-09-16T00:00:00Z",
   "total":88585111,
   "totalTestResults":88574524,
   "posNeg":88574524,
   "deathIncrease":1202,
   "hospitalizedIncrease":1517,
   "negativeIncrease":625601,
   "positiveIncrease":40021,
   "totalTestResultsIncrease":665622,
   "hash":"e66c44b8b93e51c84321a2933d4031d75084a04c"
 },
 ...
]

Sample Output

[
 {
   "x":09-16-2020,
   "y":{
      "positive":6597783,
      "negative":81976741,
      "pending":10587,
      "hospitalizedCurrently":30278,
      "hospitalizedCumulative":390624,
      "inIcuCurrently":6308,
      "inIcuCumulative":18961,
      "onVentilatorCurrently":1651,
      "onVentilatorCumulative":2090,
      "recovered":2525573,
      "death":188802,
      "hospitalized":390624,
      "total":88585111,
      "totalTestResults":88574524,
      "posNeg":88574524,
      "deathIncrease":1202,
      "hospitalizedIncrease":1517,
      "negativeIncrease":625601,
      "positiveIncrease":40021,
      "totalTestResultsIncrease":665622,
 },
 ...
]

Instead of starting with a fully functional Javascript script... we'll get a script running and switch to Typescript to start building out the structure and documenting for future changes

Getting Started with a Javascript example

Setup a project space

mkdir script-in-ts && cd script-in-ts

Then initialize a package.json that will allow you to specify scripts and dependencies needed

npm init --y

We're going to get the script running in Javascript first so lets install the necessary dependencies

npm install @babel/core @babel/node @babel/preset-env

babel allows us the ability compile modern javascript. Both @babel/core and @babel/node make that possible while @babel/preset-env allows us to specify things such as the node version or browser support

Setting up babel to run Javascript

Add a .babelrc file

touch .babelrc && code .babelrc

Paste in the following setup to specify use of node version 10. This will give us access to things like the spread operator which you will see here soon

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "10"
        }
      }
    ]
  ]
}

We're ready to create!

Make an index.js file

touch index.js && code index.js

Get started with a hello world example

console.log("hello world")

Open package.json and add a start script like so

{
...
   "scripts": {
       "start": "babel-node index.js",
      ...
   },
...
}

Let's make sure our script runs and everything is setup to move onto Typescript

npm run start
  hello world // expected output

Migrating Javascript to Typescript

Install dependencies

npm install typescript @babel/preset-typescript @babel/plugin-transform-typescript

The first dependency is Typescript itself and the second is the preset to transpile Typescript using babel

We'll need to update our .babelrc to include the Typescript preset like so

{
  "presets": [
    "@babel/preset-typescript",
    [
     ...
    ]
  ]
}

Create a tsconfig.json file

npx tsc --init

Rename index.js to index.ts

mv index.js index.ts

Update your start script in package.json

{
...
"scripts": {
 "start": "babel-node index.ts --extensions '.ts'",
 ...
},
...
}

Although we've added @babel/preset-typescript babel still needs a specification to allow .ts files

Validate babel compiles and runs index.ts

npm run start
hello world // expected output

🤞 Although this doesn't seem like a big step... it is. Unless you've configured babel frequently you forget these setup instructions and could put your search abilities to work

Getting your hands dirty with Typescript 👨🏻‍💻

If you're unfamiliar with defining types and interfaces I would highly encourage you to take a break here and familiarize yourself with the subtle differences between Javascript and Typescript. I enjoy this devhints cheatsheet when I was getting familiar.

Fetching data

We're going to type out the response from the United States COVID-19 impact in json format.

Feel free to use whatever fetching library you prefer. I'll be using node-fetch

npm install node-fetch @types/node-fetch

Fetch and log the response

import fetch from "node-fetch"
;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json = await response.json() //
  console.log(json)
})()

Typing the input

Your console should be logging something similar to this...

[
 {
   "date":20200916,
   "states":56,
   "positive":6597783,
   "negative":81976741,
   "pending":10587,
   "hospitalizedCurrently":30278,
   "hospitalizedCumulative":390624,
   "inIcuCurrently":6308,
   "inIcuCumulative":18961,
   "onVentilatorCurrently":1651,
   "onVentilatorCumulative":2090,
   "recovered":2525573,
   "dateChecked":"2020-09-16T00:00:00Z",
   "death":188802,
   "hospitalized":390624,
   "lastModified":"2020-09-16T00:00:00Z",
   "total":88585111,
   "totalTestResults":88574524,
   "posNeg":88574524,
   "deathIncrease":1202,
   "hospitalizedIncrease":1517,
   "negativeIncrease":625601,
   "positiveIncrease":40021,
   "totalTestResultsIncrease":665622,
   "hash":"e66c44b8b93e51c84321a2933d4031d75084a04c"
 },
 ...
]

Lets make an interface to replicate it!

import fetch from "node-fetch"

interface USInputDay {
  date: Date
  states: number
  positive: number
  negative: number
  pending: number
  hospitalizedCurrently: number
  hospitalizedCumulative: number
  inIcuCurrently: number
  inIcuCumulative: number
  onVentilatorCurrently: number
  onVentilatorCumulative: number
  recovered: number
  dateChecked: Date
  death: number
  hospitalized: number
  lastModified: Date
  total: number
  totalTestResults: number
  posNeg: number
  deathIncrease: number
  hospitalizedIncrease: number
  negativeIncrease: number
  positiveIncrease: number
  totalTestResultsIncrease: number
  hash: string
}

;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json = await response.json() //
  console.log(json)
})()

The interface above is an array of USInputDay so if we apply that type to the json response constant

import fetch from "node-fetch"

interface USInputDay {
  date: Date
  states: number
  positive: number
  negative: number
  pending: number
  hospitalizedCurrently: number
  hospitalizedCumulative: number
  inIcuCurrently: number
  inIcuCumulative: number
  onVentilatorCurrently: number
  onVentilatorCumulative: number
  recovered: number
  dateChecked: Date
  death: number
  hospitalized: number
  lastModified: Date
  total: number
  totalTestResults: number
  posNeg: number
  deathIncrease: number
  hospitalizedIncrease: number
  negativeIncrease: number
  positiveIncrease: number
  totalTestResultsIncrease: number
  hash: string
}

;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json: USInputDay[] = await response.json()
  console.log(json)
})()

We can now get a taste of the perks to switching to Typescript!

Auto-completion makes future requests to change input or output easy. We no longer need to log the file fetch to understand what it should look like!

Typing the output

In comparison to the input format we are just going to separate this into x and y values to show how to manipulate this into a new format

import fetch from "node-fetch"

interface USInputDay {
  date: Date
  states: number
  positive: number
  negative: number
  pending: number
  hospitalizedCurrently: number
  hospitalizedCumulative: number
  inIcuCurrently: number
  inIcuCumulative: number
  onVentilatorCurrently: number
  onVentilatorCumulative: number
  recovered: number
  dateChecked: Date
  death: number
  hospitalized: number
  lastModified: Date
  total: number
  totalTestResults: number
  posNeg: number
  deathIncrease: number
  hospitalizedIncrease: number
  negativeIncrease: number
  positiveIncrease: number
  totalTestResultsIncrease: number
  hash: string
}

interface USOutputDay {
  x: Date
  y: Omit<
    USInputDay,
    "date" | "dateChecked" | "lastModified" | "hash"
  >
}

;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json: USInputDay[] = await response.json()
})()

Above we made reuse of the USInputDay interface and we used the Omit utility to delete the keys we don't want to account for

Format Output

Now all we have to do is format the input into the output structure

import fetch from "node-fetch"

interface USInputDay {
  date: Date
  states: number
  positive: number
  negative: number
  pending: number
  hospitalizedCurrently: number
  hospitalizedCumulative: number
  inIcuCurrently: number
  inIcuCumulative: number
  onVentilatorCurrently: number
  onVentilatorCumulative: number
  recovered: number
  dateChecked: Date
  death: number
  hospitalized: number
  lastModified: Date
  total: number
  totalTestResults: number
  posNeg: number
  deathIncrease: number
  hospitalizedIncrease: number
  negativeIncrease: number
  positiveIncrease: number
  totalTestResultsIncrease: number
  hash: string
}

interface USOutputDay {
  x: Date
  y: Omit<
    USInputDay,
    "date" | "dateChecked" | "lastModified" | "hash"
  >
}

;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json: USInputDay[] = await response.json()

  const output: USOutputDay[] = json.map(
    ({ date, dateChecked, lastModified, hash, ...theRest }) => ({
      x: date,
      y: theRest
    })
  )
})()

I got a little fancy here and used the spread operator. Since I knew the output format only excluded a few keys from the input I pulled the keys I wanted and the ...theRest is all the remaining keys in the object I need to satisfy my output.

Write it to file

Last step... I promise 😉

Import the file system and write it to an output file

import fetch from "node-fetch"
import { writeFileSync } from "fs"

interface USInputDay {
  date: Date
  states: number
  positive: number
  negative: number
  pending: number
  hospitalizedCurrently: number
  hospitalizedCumulative: number
  inIcuCurrently: number
  inIcuCumulative: number
  onVentilatorCurrently: number
  onVentilatorCumulative: number
  recovered: number
  dateChecked: Date
  death: number
  hospitalized: number
  lastModified: Date
  total: number
  totalTestResults: number
  posNeg: number
  deathIncrease: number
  hospitalizedIncrease: number
  negativeIncrease: number
  positiveIncrease: number
  totalTestResultsIncrease: number
  hash: string
}

interface USOutputDay {
  x: Date
  y: Omit<
    USInputDay,
    "date" | "dateChecked" | "lastModified" | "hash"
  >
}

;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json: USInputDay[] = await response.json()

  const output: USOutputDay[] = json.map(
    ({ date, dateChecked, lastModified, hash, ...theRest }) => ({
      x: date,
      y: theRest
    })
  )

  writeFileSync("formatted.json", JSON.stringify(output)) 
})()

That's it! Now your script is ready to tweak for a new change or to use as is!

If you got lost at any point, no fear, here is a repository showing what was made!

Summary

We learned how to setup a project from scratch to use babel and run basic Javascript files. We then converted Javascript to Typescript and setup babel to handle Typescript files. Next we learned how to fetch files using node-fetch. We gained some experiences building types/interfaces to control input and output for benefits such as auto-completion. Lastly, we learned to write content to a file using fs.

Comments

[crisarji]

Really enjoyed the reading!, straight to the point and very well explained!..