Starting out in Typescript

Everything I see about Angular 2 has a footnote attached to it. Well two really. First, it's not complete, and nobody's sure what it'll look like until it's done. Two, it often appears alongside the word Typescript. What's that?

Well it's a version of Javacript that provides 'type', i.e. this variable is a String, that one is a Boolean. So Typescript begins its life as a typed version of JS and ends its life as standard JS, and in the middle is a compiler. Compilers can bring pain, or so I've heard from Java programmers. But also they can bring peace of mind for a dev who knows how to leverage it and catch problems before they are pushed to production code.

So using a compiler means first configuring a compiler. Let's do that. Fortunately, Microsoft's VS Code has some great tooling for that.

First step is to create a tsconfig.json file for our project. Once that filed is named, I can hit Ctrl-Space to get some code hints, and select the obvious and only choice: 'Compiler Options.'

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs"
    },
    "exclude": [
        "node_modules"
    ]
}              

The default includes everything above except the "target" line, which I included here. There's a-whole-nother discussion we can have about the target options.

Now we can create a separate file in the same directory with our Typescript. The setup from VS Code gives us this example:

demo.ts

class Startup {
    public static main(): number {
        console.log('Hello World');
        return 0;
    }
}
 
Startup.main();

So already we can see we're not in Javascript land. "Class"? What's that? Before we get bogged down in that, let's keep moving and see how this becomes Javascript.

With our Typescript complete, we can hit F1 in VS Code and search for "Tasks: Configure Task Runner." That generates a new file, tasks.json, in a subdirectory.

tasks.json

{
    // See http://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

Now with everything in place, we can compile! If the Typescript compiler isn't installed, do that and restart VS Code. If everything is right, we hit Ctrl-Shift-B and perform the build. Nothing may be apparent. Ctrl-Shift-M will open the message bar up top to see if any errors are reported. For our little example, it should be clean.

The end result is a Javascript file sitting in our directory next to that .ts file.

demo.js

var Startup = (function () {
    function Startup() {
    }
    Startup.main = function () {
        console.log('Hello World');
        return 0;
    };
    return Startup;
}());
Startup.main();

It's cool that VS Code does all this for us, but we have options. From the command line we can compile that .ts file as well. Either way, we now have working javascript to integrate into a project.