What’s TypeScript

Typescript is a typed superset of JavaScript that compiles down to plain JavaScript that works in any browser, host or operating system. TypeScript is open source and maintained by Microsoft.

TypeScript introduces features like:

  • Static typing
  • Interfaces
  • Generics

But also uses features from ES6:

  • Classes
  • Modules
  • The arrow syntax
  • Optional and default parameters

Larger JavaScript projects tends to get a bit messy without following design patterns. TypeScript tries to solve this problem by making it easier to write modular code and by introducing types in JavaScript.

Setting up the environment

I assume that you have Visual Studio Code and npm already installed. We start by installing the TypeScript compiler(tsc).

npm install -g typescript

Now lets create a file named app.ts. TypeScript files have the .ts extension and its’s in these files we will write our TypeScript code.

// app.ts
function sayHelloWorld(name) {
    console.log("Hello world " + name);
}

sayHelloWorld("Jonathan")

As you can see this is just plain old JavaScript but it proves that you can mix TypeScript and JavaScript code. Now lets create tsconfig.json file. The tsconfig file is placed in the root directory of the TypeScript project. It specifies the files and the compiler options to compile the project. It is not mandatory to have this file but it’s simpler than specifying a whole bunch of command line arguments to tsc.

// tsconfig.js
{
    "compilerOptions": {
        "target": "es5",
        "removeComments": true,
        "sourceMap": true
    },
    "exclude": [
        "node_modules",
        "typings"
    ]
}

To create a task in Visual Studio Code that will compile our TypeScript file press CTRL+SHIFT+P to access the command palette. Type “configure task runner” and press enter. You will now have a task.json file created under the folder .vscode in your root folder. It probably looks like this:

{
	// tasks.json
	"version": "0.1.0",
	"command": "tsc",
	"isShellCommand": true,
	"args": ["-w", "-p", "."],
	"showOutput": "silent",
	"isWatching": true,
	"problemMatcher": "$tsc-watch"
}

If we look at the args array we have the -w parameter which tells the compiler to look for change files in our project so we don’t have to run our task manually. The -p parameter specifies which folder is the root of our project. The dot specifies the current directory.

Now press CTRL+SHIFT+B to start the task. It should have created a app.js file in the same directory. Create this simple html document and verify in the JavaScript console that it works.

<!doctype html>
<html>

<head>
    <script src="app.js"></script>

<body>
</body>

</html>

Types

Lets look at types:

let any1: any = "asd";
let any2: any = 123;

let str1: string = "asd";
let str2 = "asd"; // Type inference

let number1: number = 123;

let bool1: Boolean = true;

let myFunction1: (message: string) => string = function (message: string) {
    return "hej";
}

let myFunction2 = function (message: string) { // Type inference
    return "hej";
}

let obj = { // Type inference
    property1: 123,
};

I’m not going in to detail about every row but there’s two notable things. First we have the type any which can be any type of value. Second we have the object literal at the bottom. When an object is declared you cannot add properties later.

interface ISayHelloCallback {
    (message: string): void;
}

interface ISayHelloOptions {
    names: string[];
    alert?: boolean;
    callback: ISayHelloCallback;
}

function sayHello(options: ISayHelloOptions) {
    var msg = "Hello " + options.names.join(", ") + "!";
    
    if(options.alert) {
        alert(msg);
    } else {
        console.log(msg);
    }
    
    options.callback("Said hello!");
}

sayHello({
   names: [
       "Kalle",
       "Nisse"
   ],
   callback: (message: string) => {
       console.log(message);
   }
   
});

You can set an interface as type parameter to a function so when you calling that function you need to specify an object with those properties. You can also set optional properties. Above i specified the alert property as an optional parameter. Interfaces can also be used for specifying function signatures.

Type assertions

window.onload = () => {
    let input = <HTMLInputElement>document.getElementById("input1");
    input.value = "Tjena";
}

Type assertions works like type casting in other languages. Sometimes you know more about the underlying type than TypeScript does. The return type of document.getElementById is HTMLElement. So we cast it to HTMLInputElement to get access to all the properties of an input element.

Classes and inheritance

class BaseClass {
    public publicBaseProperty1: number;
    publicBaseProperty2: number; // default public
    protected protectedBaseProperty: number;
    private baseProperty3: number;

    constructor(someNumber: number) {
        this.baseProperty3 = someNumber
    }
    
    baseMethod() {
        console.log("hej");
    }
}

class ChildClass extends BaseClass {
    static childProperty1: number = 123;
    private privateChildProperty: number;
    
    constructor() {
        super(1);
        this.publicBaseProperty1 = 123;
        this.publicBaseProperty2 = 1234;
    }
    
    childMethod() {
        this.protectedBaseProperty = 555;
        super.baseMethod()
    }
    
    get childProperty1(): number {
        return this.privateChildProperty;
    }
    
    set childProperty1(value: number) {
        this.privateChildProperty = value;
    }
}

Classes can inherit other classes and implement interfaces. Above we can se that TypeScript supports the common functionality of other object oriented languages.

Loading external libraries

To get intellisense for external libraries like jQuery you need to get a TypeScript definition file. Go to http://definitelytyped.org/  and download the .d.ts file for jQuery. And then reference it in the top of your .ts file

/// <reference path="typings/browser.d.ts" />

$(document).ready(function () {
    alert(1);
});

Don’t forget to load the jQuery library either with a module loader or just include it on the web page.

Moving on

I hope you’ve got something out of this and if you wan’t to learn more about TypeScript there’s a lot more documentation at the website https://www.typescriptlang.org/.