What is Typescript? Why bother?

…and how to get started

What is Typescript?

Fundamentally, Typescript is JavaScript with additional code syntax to handle a type system. That type system helps us catch errors during development, constantly analyzing our code and looking for bugs. We then compile our Typescript, which is then turned into the JavaScript that is ultimately executed! Typescript has excellent documentation here: https://www.typescriptlang.org/docs/ and it is one of the easiest statically-typed language to learn!

What are types?

There are “primitive types” like strings, booleans, numbers, etc. with their own baked in properties and methods. But there are also “object types” like arrays, functions, classes, and objects, a lot of which we create.

Why do Types matter?

We can filter out errors early on in our code if something doesn’t have the correct properties of the type we’ve specified. Also, on a large scale projects, types allows other engineers to understand what values are flowing around in our codebase.

Always ready to de-bug.

Getting Started

npm install -g typescript ts-node

Here we install Typescript as a global module. We also install ts-node which is a command line tool which allows us to compile and execute Typescript quickly with one command in our terminal. Typescript files are “.ts” files. Let’s make one:

mkdir index.ts

Compiling

An essential part of using Typescript is compiling. So before we even start using the TypeScript syntax let’s look at that process.

Here we’re making an http request to a third party API using Axios with plain old JavaScript.

// index.ts
import axios from 'axios';
const url = "https://jsonplaceholder.typicode.com/todos/1"
axios.get(url).then( response => {
  console.log(response.data);
});

**For this example you will need to generate a package.json file (npm init -y) and install axios (npm install axios).**

We now run the compiler on our command line:

tsc index.ts

Now we have a new file in our folder and it’s a “.js” file! It looks very different:

// index.js
"use strict";
exports.__esModule = true;
var axios_1 = require("axios");
var url = "https://jsonplaceholder.typicode.com/todos/1";
axios_1["default"].get(url).then(function (response) {
console.log(response.data);
});

It’s the compiled version of our Typescript code! I don’t know about you, but that was my first time compiling anything — pretty exciting stuff. Now, to run this JavaScript file, we use the node command line tool:

node index.js

You should now see the object in your command line:

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

But running the compiler and then running the file separately over and over again with two separate steps is not very efficient. So the ts-node module we installed earlier combines the steps into one:

ts-node index.ts

This command will now compile AND run the resulting js file. The outcome will be the same!

Okay, but what about TypeScript?

Here we will organize and print out that data, utilizing some very basic TypeScript:

// index.ts
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 todo = response.data as Todo;
  const id = todo.id;
  const title = todo.title;
  const completed = todo.completed;
  logTodo(id, title, completed);
});
const logTodo = (id:number, title:string, completed:boolean) => {
 console.log(`
  The Todo with ID: ${id}
  Has a title of: ${title}
  Is it finished? ${completed}
 `);
}

The first piece of Typescript syntax you’ll notice is the “Interface.” This is used to define the structure of the object. It says that it will have three distinct properties—name “id,” “title,” and “completed,” and it specifies what their types will be. Then we are using that object when we assign values from our http response. You will also see in our console.log function, we have predetermined the data types that it will be receiving as arguments when called. These are syntaxes of Typescript.

Now as is, this is all correct. However. Let’s say in my HTPP request, I had a typo or mislabeled one (or all) my properties:

axios.get(url).then( response => {
  const todo = response.data as Todo;
  const ID = todo.ID;
  const Title = todo.Title;
  const isComplete = todo.isComplete;
  logTodo(id, title, completed);
});

This is how it would appear in my editor, before I even ran the code!

Note the helpful indicators and descriptions when I hover. I know before my code runs that I’ve made a mistake in my assignments, and if it’s close, it offers up suggestions.

Let’s throw another error:

axios.get(url).then( response => {
  const todo = response.data as Todo;
  const id = todo.id;
  const title = todo.title;
  const completed = todo.completed;
  logTodo(id, completed, title); // <-- ERROR HERE!!! 
});
const logTodo = (id: number, title:string, completed:boolean) => {
 console.log(`
  The Todo with ID: ${id}
  Has a title of: ${title}
  Is it finished? ${completed}
 `);
}

Above I have mistakenly switched the order of the variables in our logTodo function. But our function is expecting the second variable to be a string and the third variable to be a boolean. So here is what we’ll see:

Again, I know before my code even compiles that there is an issue so I can correct it. But once compiled, in my .js file, the Typescript disappears:

"use strict";
exports.__esModule = true;
var axios_1 = require("axios");
var url = "https://jsonplaceholder.typicode.com/todos/1";
axios_1["default"].get(url).then(function (response) {
  var todo = response.data;
  var id = todo.id;
  var title = todo.title;
  var completed = todo.completed;
  logTodo(id, title, completed);
});
var logTodo = function (id, title, completed) {
  console.log("\n  The Todo with ID: " + id + "\n  Has a title of: "   
  + title + "\n  Is it finished? " + completed + "\n");
};

Voila. You can already see how much time and agony this could save. Once you are familiar with the syntax and design patterns, you can use it to write reusable code that can be easier to read and to debug!