TypeScript Background Information

Doppio is written in TypeScript, which is like JavaScript but with type annotations. Type annotations describe the types of function arguments, return values, and variables. TypeScript uses these annotations to check that your program is not doing anything illegal.

Installing TypeScript.

Install NodeJS, and then install TypeScript from the command line:

npm install -g typescript

"Hello World"

Open up your favorite text editor, and type in the following:

console.log("Hello World!");

Save the file as hello.ts, and compile it to JavaScript:

$ tsc hello.ts

tsc, the TypeScript Compiler, will compile the TypeScript file into JavaScript (hello.js). Now you can run the JavaScript file in Node:

$ node hello.js
Hello World!

If you look at hello.js, you'll notice it's identical to hello.ts! That's because TypeScript is nearly identical to JavaScript, except with type annotations, which we will discuss next.

Introduction to Type Annotations

TypeScript uses type annotations to verify that your program isn't doing anything illegal. Let's walk through a simple example.

In JavaScript, we can write the following function to add two numbers:

function add(num1, num2) {
  return num1 + num2;
}

add(5, 4); // Returns 9

However, JavaScript does not prevent you from calling add with non-numbers, which can result in unpredictable results:

add("hey", [1, 2, 4]); // Returns 'hey1,2,4'

TypeScript lets you declare that add takes in two numbers as arguments, and returns a number. If you do something illegal, it will warn you when you try to compile your program to JavaScript:

function add(num1: number, num2: number): number {
  return num1 + num2;
}

add(5, 4); // Returns 9.
add("hey", [1, 2, 4]); // Those aren't numbers!

If you put the above example into a file named example.ts and compile it, you'll get an error:

$ tsc example.ts
example.ts(6,5): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

These error messages prevent you from writing incorrect JavaScript programs, and save you a lot of debugging time.

TypeScript Classes

TypeScript lets you define classes, much like other programming languages like Java or C#. JavaScript itself is getting classes in the next version of JavaScript, and TypeScript classes aim to mirror JavaScript classes in syntax and function.

Let's walk through a simple example.

class Animal {
  private numberOfLegs: number;

  constructor(numberOfLegs: number) {
    this.numberOfLegs = numberOfLegs;
  }

  public getNumberOfLegs(): number { return this.numberOfLegs; }

  public makeNoise(): string { return "Silence"; }
}

class Dog extends Animal {
  constructor() {
    super(4); // Dogs have 4 legs.
  }

  public makeNoise(): string { return "Woof!"; }
}

function printInfo(animal: Animal) {
  console.log(animal.makeNoise());
  console.log("Number of legs: " + animal.getNumberOfLegs());
}

var myDog = new Dog();
var myAnimal = new Animal(22);

printInfo(myDog); // "Woof!" "Number of legs: 4"
printInfo(myAnimal); // "Silence" "Number of legs: 22"