"0 to 100 ... real quick" - Drake

TypeScript

Overview

What's the history?
What problems does it solve?
How's the market penetration?
Is learning it a good investment?
Does it have a future?
A small code example to finish off.

Game Plan

I show you some JavaScript
I show you how to do it TypeScript
I show the transpiled JavaScript

Classes

JavaScript


var Person = function (name) {
    this.name = name;
};

Person.prototype.talk = function () {
    console.log("Hi my name is " + this.name);
};

TypeScript


class Person {

    constructor(name) {
        this.name = name;
    }

    talk() {
        console.log("Hi my name is " + this.name);
    }
}

Transpiled


var Person = (function () {
    function Person(name) {
        this.name = name;
    }
    Person.prototype.talk = function () {
        console.log("Hi my name is " + this.name);
    };
    return Person;
})();

Inheritance

JavaScript


function AnnoyingPerson() {
    Person.apply(this, arguments);
};

AnnoyingPerson.prototype = Object.create(Person.prototype);
AnnoyingPerson.prototype.constructor = AnnoyingPerson;

AnnoyingPerson.prototype.talk = function () {
    console.log("HI MY NAME IS " + this.name.toUpperCase());
};

TypeScript


class AnnoyingPerson extends Person {

    talk() {
        console.log("HI MY NAME IS " + this.name.toUpperCase());
    }    

}

Transpiled


var AnnoyingPerson = (function (_super) {
    __extends(AnnoyingPerson, _super);
    function AnnoyingPerson() {
        _super.apply(this, arguments);
    }
    AnnoyingPerson.prototype.talk = function () {
        console.log("HI MY NAME IS " + this.name.toUpperCase());
    };
    return AnnoyingPerson;
})(Person);

Getters/Setters

JavaScript

function Troll() {}

Object.defineProperty(Troll.prototype, "message", {

    get: function () {
        return "You mad bro?";
    },

    set: function (msg) {
        console.log("Cool message bro ...");
    }
    
});

TypeScript

class Troll {

    get message() {
        return "You mad bro?";
    }

    set message(msg) {
        console.log("Cool message bro ...");
    }

}

Transpiled

var Troll = (function () {
    function Troll() {
    }
    Object.defineProperty(Troll.prototype, "message", {
        get: function () {
            return "You mad bro?";
        },
        set: function (msg) {
            console.log("Cool message bro ...");
        },
        enumerable: true,
        configurable: true
    });
    return Troll;
})();

Functions

JavaScript


function DoSomethingCool() {
    // no ...
}

TypeScript


function DoSomethingCool() {
    // no ...
}

Transpiled


function DoSomethingCool() {
    // no ...
}

Arrow Functions

JavaScript


function Fetcher () {};

Fetcher.prototype.massageIt = function (data) {
    return data;
};

Fetcher.prototype.fetchStuff = function () {
    var _this = this;
    return getJSON("/stuff").then(function (data) {
        return _this.massageIt(data.data);
    });
};

TypeScript


function Fetcher () {}

Fetcher.prototype.massageIt = function (data) {
    return data;
};

Fetcher.prototype.fetchStuff = function () {
    return getJSON("/stuff").then((data) => {
        return this.massageIt(data.data);
    });
};

Transpiled

function Fetcher() {
}
Fetcher.prototype.massageIt = function (data) {
    return data;
};
Fetcher.prototype.fetchStuff = function () {
    var _this = this;
    return getJSON("/stuff").then(function (data) {
        return _this.massageIt(data.data);
    });
};

Default Parameters

JavaScript


function Say(words) {
    if (typeof words === 'undefined') {
        words = "Hello World";
    }
    console.log(words);
}

TypeScript


function Say(words = "Hello World") {
    console.log(words);
}

Transpiled


function Say(words) {
    if (words === void 0) { words = "Hello World"; }
    console.log(words);
}

Rest Parameters

JavaScript


function Add(/* ...values */) {
    var slice  = Array.prototype.slice,
        values = slice.call(arguments);
    return values.reduce(function (sum, value) {
        return sum + value;
    });
}

TypeScript


function Add(...values) {
    return values.reduce((sum, value) => sum + value);
}

Transpiled


function Add() {
    var values = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        values[_i - 0] = arguments[_i];
    }
    return values.reduce(function (sum, value) {
        return sum + value;
    });
}

Template Strings

JavaScript


var name = "Ilia",
    age  = 24;

console.log("My name is " + name + ". I'm " + 
    age + " years old")

TypeScript


var name = "Ilia",
    age  = 24;

console.log(`My name is ${name}. I'm ${age} years old`);

Transpiled


var name = "Ilia", age = 24;
console.log("My name is " + name + ". I'm " + 
    age + " years old");

Modules

JavaScript


var MyModule = MyModule || {};

MyModule.Foo = "Bar";

MyModule.LogFoo = function () {
    console.log(MyModule.Foo);
};

TypeScript


module MyModule {

	export var Foo = "Bar";

        export function LogFoo() {
            console.log(Foo);
        }

}

Transpiled

var MyModule;
(function (MyModule) {
    MyModule.Foo = "Bar";
    function LogFoo() {
        console.log(MyModule.Foo);
    }
    MyModule.LogFoo = LogFoo;
})(MyModule || (MyModule = {}));

There's More!

Enums
Short Object Literals
Decorators
Destructuring
Types ...

Primitives

string
number
boolean
undefined
null

Built-In Objects

Object
Function
Boolean
Error
Array
Date
etc ...

Type Annotations

Function Parameters


/**
 * @param {string} msg Message to display.
 */
function Display(msg) {
    console.log(msg);
}

/**
 * @param {boolean} [loud=false] Greet "loudly".
 */
function Greet(loud) {
    if (typeof loud === 'undefined') {
      loud = false;
    }
    var msg = "Hello World";
    console.log(loud ? msg.toUpperCase() : msg);
}


/**
 * @param msg Message to display.
 */
function Display(msg: string) {
    console.log(msg);
}

/**
 * @param loud Greet "loudly".
 */
function Greet(loud: boolean = false) {
    var msg = "Hello World";
    console.log(loud ? msg.toUpperCase() : msg);
}





function Display(msg) {
    console.log(msg);
}




function Greet(loud) {
    if (typeof loud === 'undefined') {
      loud = false;
    }
    var msg = "Hello World";
    console.log(loud ? msg.toUpperCase() : msg);
}

Class Properties






class Person {

    name: string;
    age:  number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age  = age;
    }

}

/**
 * @class Person
 * @param {string} name
 * @param {number} age
 */
function Person(name, age) {

  /**
   * @name Person#name
   * @type string
   */
  this.name = name;

  /**
   * @name Person#age
   * @type number
   */
  this.age = age;
}






function Person(name, age) {
  this.name = name;
  this.age  = age;
}

Incorrect Usage


var person = new Person("Ilia", 24);

person.talks()

Runtime Error

Uncaught TypeError: undefined is not a function

Compiler Error

Property 'talks' does not exist on type 'Person'.

It's not about telling the computer how to store data, it's about validating your assumptions.

We're Not Writing C

Object Properties

interface UserData {
    id:       number;
    name:     string;
    email:    string;
    lastSeen: Date;
}

function DoStuff(user: UserData): void {
    // ...
}

function DoOtherStuff(user: UserData): void {
    // ...
}

Subverting The Type Checker


var w: any = window;

// or

var w = <any>window;

Type Assertions


describe('User', function () {
  describe('#getName()', function () {
    it('should return a string', function () {
      var user = new User("ilia"),
          name = user.getName();
      expect(name).to.be.a('string');
    });
  });
});