Typed Templates

Hello there! Today, I want to talk about my experiences with TypeScript, which is basically JavaScript with static types.

As Java was my first and is currently my primary language, I was delighted to see that something like this existed.

It all started when I was trying to make a gift list app. As part of this, I needed to render a gift item to the page and ended up with this expression:

"<div class='card-list-item-container mdl-shadow--2dp'><div class='card-list-item-image' style=\"background-image: url(\'" + imageUrl + "\')\"></div><div class='mdl-card__menu'><button id='card-" + id + "-menu' class='mdl-button mdl-js-button mdl-button--icon'><i class='material-icons'>more_vert</i></button><ul class='mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect'for='card-" + id + "-menu'><li class='mdl-menu__item' id='item-" + id + "-edit'>Edit Item</li><li class='mdl-menu__item'  id='item-" + id + "-remove'>Remove Item</li></ul></div><div class='card-list-item mdl-card'><div class='mdl-card__title'><h2 class='mdl-card__title-text'>" + name + "</h2></div><div class='mdl-card__supporting-text'>" + description + "</div>" + claimText + "</div></div>"

You can probably see why I thought there must be a better solution...

Instead of doing the sensible thing which would have been to search for something nicer (which probably would've lead me to template strings which I had no idea existed at the time), I thought it would be interesting to try out a web framework. It didn't take me long to find Angular 2 and the TypeScript language it was built on. I'll write another post on Angular 2 soon but for now, TypeScript.

What I really like about TypeScript is that it is a superset of JavaScript, meaning you can pretty much just write JavaScript and it will run. The transpiling process (a fancy way of saying converting to JavaScript) is also seamless when you use tools like webpack. The syntax is really simple too: if you want to give something a type, you just put a colon after its name and then the type. Here's an example:

let appName: string = "Calculator";

let a: number = 10;
let b: number = 15;

let total: number = a * b;

Defining your own data structures is also simple and allows object-oriented code to written with ease compared to JavaScript's object functions:

class User {
  firstName: string;
  lastName: string;

  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFullName() {
    return this.firstName + " " + this.lastName;
  }
}

The above code refers to the following JavaScript:

var User = (function () {
    function User(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    User.prototype.getFullName = function () {
        return this.firstName + " " + this.lastName;
    };
    return User;
}());

In any case, TypeScript also helps to maintain backwards compatibility. For example, if you used an arrow function in TypeScript, by default it would be transpiled into a normal inline function. There are quite a few other advantages, but these are my favourite.

The only minor annoyance I've had with TypeScript has been the need to include all of the @types packages in npm. I expect that there is a way to automate it that I haven't found yet, nonetheless, I'm very impressed with just how many packages have been typed.

I hope that this post has been an interesting insight into TypeScript (if you haven't tried it already) and has given reasons why I think everyone should be using it instead of pure JavaScript. Thank you for reading this post.