Introduction to TypeScript

Once upon a time, when HTML4 and CSS2 roamed the earth, developers became tired with the static webpages and needed an easy language to implement some basic behavior and animations to liven up the web. And lo, came JavaScript, a dynamically typed, interpreted language, where every function was an object, which was also a variable and their type could be whatever it at the moment needed to be, and it was beautiful. It had the easiest learning curve for amateurs without all the discipline of the “real” programming languages. But hey - it’s not like in 10 years people would be writing large-scale applications in it, right?

JavaScript, from its humble beginnings in DHTML was never intended for building complex applications. The rapid surge in its popularity exposed its many weaknesses like for example the unintuitive classes implementation or the difficulty of keeping track of the format of data passed between functions.

TypeScript is not the first attempt to fix those flaws with a transplier. Just like Less and Sass became the norm for authoring CSS, there appeared some alternative ways of writing JavaScript: most notably CoffeScript and Dart. TypeScript is also not the newest. It has been around since 2012, but it gained a lot of popularity only recently, after the Angular team announced Angular2 would be built in TypeScript. Now, TypeScript is a Microsoft solution. Google develops its own language: Dart. So what won the Angular team over? How does TypeScript improve on JavaScript?

Features

Typed variables

TypeScript introduces the much needed typed variables. There are 7 types: Boolean, Number, String, Array, Enum, Any and Void.

var counter: number = 5;
var isDone: boolean = true;
var name: string = "john";
var color = "blue";

Assigning a value of a wrong type to a variable would result in a compilation error. This allows early bug detection at compile time instead of run time and could save much time and nerves.

The types can also be declared for function arguments and return types:

function sumOf(a: number, b: number): string {
     return "a+b="+a+b;
}

Arguments can be marked as optional or have default values:

function sumOf(a?: number, b=5): string {    
     return "a+b="+a+b;
}

Interfaces

Interfaces are a real gem in tidying up your API communication. It’s a way of describing your own data structures and using them the same way as the basic types:

interface Movie {
  title: string;
  year: number;
  rating: number;
}
$.get( "api/movie", function( data: Movie ) {
     console.log(data.title+" "data.year);
});

Classes

In most object oriented languages there are objects and classes. Objects are instances of classes, classes inherit from other classes. Not so with JavaScript. To achieve the object oriented paradigm in vanilla JS you had to exercise your imagination to the mechanism of prototypes.

In TypeScript there is a more direct way to implement classes and inheritance:

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    callMe() {
        return "hello "+this.name;
    }
}
class Musician extends Person {
     instrument: string;
     constructor(name: string, instrument: string) {
           super(name);
           this.instrument=instrument;
     }
}

Modules

Modules offer a comfortable way of organizing your code. They allow enclosing all the internal functions and classes to make accessible externally only the selected aspects:

module Shapes {
    export class Rectangle {
        constructor (
            public height: number,
            public width: number) {
     }
    }
}
var rect = Shapes.Rectangle(10, 4);

.d.ts files

The stricter compile-time validation is normally a blessing, but what about working with external non-TypeScript libraries or APIs? Even the simple jQuery calls would fire compilation errors galore.

For example:

$("#myDiv").hide();

Cries out cannot find name "$"

The error doesn’t abort the compilation and the .js file is still created, but what’s the pleasure of writing error-red code? Fortunately TypeScript has a fast way of integrating non-TS libraries: the declaration files. The .d.ts files allow to describe the shape of the library for compilation purposes. You can write your own descriptions, or find them in the ever growing base on http://definitelytyped.org/.

By including a line:

/// <reference path="jquery/jquery.d.ts" />
$("#myDiv").hide();

The errors are gone, and we’re able to fully use the jQuery functions.

The .d.ts files are development aid only and are not included in the compiled .js file.

Benefits

TypeScript transpiles to vanilla JavaScript and this is what’s run in the browser. So is it just the matter of aesthetics? Of course not. With its more disciplined approach to declaring variables and types, TypeScript offers far better tool support. VisualStudio includes it by default from their 2015 edition (since 2012 as plugins) and offers a build in compiler and most of the Intelisense functionality for .ts files, allowing:

  • real time validation
  • better code completion
  • hinting
  • refactoring across many files
  • navigation to definition
  • tips and quick-fixes
  • downloading and including .d.ts files when needed

Non-Microsoft tool support includes plugins for Sublime, Webstorm and the compilation can be attached to your Grunt or gulp process.

The other great thing about TypeScript is the zero-cost of switching to use it. TypeScript is a superset JavaScript, meaning every JavaScript file is also a valid TypeScript file. Just rename the file from .js to .ts and congratulations, you’re using TypeScript! It’s entirely up to you which of the new features of TS you want to start using and when. You might start for example by declaring the types only in the most critical functions, then gradually move to typing all the rest, then introducing interfaces and so on. You learn how to use TypeScript without losing any functionality that was.

TypeScript VS ECMAScript6

But wait! Default function parameters, classes and modules are the highlights of ECMAScript6. With the wide adaptation of the standard just around the corner, you might ask “why learn something else?”. The best answer is: it’s not something else. Microsoft aims to align their features with the Harmony standard making TypeScript more of a bridge allowing to start using the new syntax. In that way it’s more like the modern ES6 transpilers: Babel and Traceur then Dart and CoffeeScript. In fact combined with core-js polyfil, TypeScript is the third best option for using elements of ES6 in production today, with promise of better compatibility in future releases.

compatability table source: https://kangax.github.io/compat-table/es6/

Wrap-up

TypeScript isn’t the one solution to rule them all. It would be hard to persuade Ruby enthusiasts to abandon CoffeeScript, and employing TypeScript to writing small animation plugin might be an overkill.

TypeScript is best suited if you:

  • have background in C# or Java
  • work in Microsoft environment
  • write large scale application where loose typing caused errors before
  • intend to use typings
  • believe in IDE error detection
  • are curious about ES6, but not fully convinced yet