Typescript

javascript
coffeescript
ClojureScript, ELM

Using TypeScript with React

https://www.gitbook.com/download/pdf/book/basarat/typescript
http://brianflove.com/2016/11/08/typescript-2-express-node/
https://blog.risingstack.com/building-a-node-js-app-with-typescript-tutorial/ - done reading, has a good section on debugging

https://github.com/palantir/tslint
https://github.com/palantir/tslint/blob/master/tslint.json

https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types - .d.ts files for popular libraries
https://github.com/definitelyTyped/DefinitelyTyped/#how-can-i-contribute
https://github.com/Microsoft/TypeScript-Node-Starter - learn more about TypeScript .d.ts files.
http://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
https://basarat.gitbooks.io/typescript/
https://basarat.gitbooks.io/typescript/docs/destructuring.html

https://github.com/oceanroleplay/discord.ts - Create a discord bot with TypeScript and Decorators!

type inference

TypeScript:
https://www.typescriptlang.org/
http://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript - done watching
http://stackoverflow.com/questions/12694530/what-is-typescript-and-why-would-i-use-it-in-place-of-javascript

http://www.sitepoint.com/microsoft-typescript-javascript-precompiler
https://www.sitepoint.com/introduction-to-typescript/
http://beta.slashdot.org/story/175699
https://blogs.msdn.microsoft.com/typescript/2016/09/22/announcing-typescript-2-0/

What is TypeScript?

TypeScript is a superset of JavaScript. It compiles to JavaScript, and therefore works on any browser, any operating system. TypeScript is open source. All JavaScript code is TypeScript code. Simply copy and paste. All JavaScript libraries work with TypeScript.

TypeScript enable application development with excellent tooling. It provide static types. Static types completely disappear at run-time.

Why should we use TypeScript instead of JavaScript?

JavaScript allows us to do a lot of stuffs that does not make sense, and therefore error-prone. TypeScript helps us catch these errors.

Does TypeScript work with existing JavaScript libaries?

Yes, but declaration files must be written and maintained separately. This is for type inference, and autocompletion, etc.

What is the default data type for a variable if we do not specify a data type for it?

any. If we do not specify a data type for a variable, the default data type would be any. any is just a data type for object.

What are the available data types provided by TypeScript?

  1. any
  2. string
  3. number
  4. bool

How can we declare a variable to be of a certain data type?

function process(x: string) {
    x.name = "foo";
    var v = x + x;
    alert(v);
}

In the above code, we declare x to be of type string. When we declare x to be of type string then x.name become invalid (will not compile) because x is no longer an object.

Can TypeScript infer the data types?

Yes.

function process(x: number) {
    var v = x + x;
    alert(v);
}

In the above code, x is declared as number, and we did not declare a data type for v, but TypeScript will automatically treat v as number, and TypeScript will complain on the alert line because alert take a string. TypeScript is a language but it also act as a tool to catch these things.

Can we add two booleans together?

No.

function process(x: bool) {
    var v = x + x;
}

In the above code, the TypeScript compiler will complain with "Operator '+' cannot be applied to types 'bool' and 'bool'".

How can we declare array?

function process(x: string[]) {
    var y = x[0].length;
}

In the above code, we declare x to be an array of string, and therefore we can access elements of x using the index operator [].

How can we declare a variable as function that returns a string?

function process(x: () => string) {
    x();
}

In the above code, the function process expect to receive a function as a parameter.

How can we declare custom data type?

function process(x: { a: number; b: string; }) {
    return x.a;
}

In the above code, x is expected to be of a type that has two properties (a and b, and a must be of type number, and b must be of type string).

Can we declare a type in place?

Yes.

function process(x: { a: number; b: string; }) {
    return x.a;
}

In the above code, we declare the type of x in place. x is expected to be of a type that has two properties (a and b, and a must be of type number, and b must be of type string). We can also give a type a name using the interface keyword:

interface Thing {
    a: number;
    b: string;
}

Can TypeScript do type inference?

Yes.

interface Thing {
    a: number;
    b: string;
}

function process(x: Thing) {
    return x.a;
}

var n = process({ a: 10, b: "hello" });

In the above code, TypeScript automatically treat n as a number.

How can we declare an optional property?

interface Thing {
    a: number;
    b: string;
    c?: bool;
}

In the above code, c is an optional property.

How can we declare a function in an data type?

interface Thing {
    a: number;
    b: string;
    foo(s: string): string;
}

In the above code, foo is a function that takes a string and return a string.

How can we make a parameter optional?

interface Thing {
    a: number;
    b: string;
    foo(s: string, n?: number): string;
}

In the above code, we specify foo as a function that can take upto two parameters, but the second parameter is optional.

Can TypeScript support overloading?

Yes.

interface Thing {
    a: number;
    b: string;
    foo(s: string): string;
    foo(n: number): number;
}

In the above code, we overload the function foo (we define it twice with different signature).

Can we have data attribute with a function?

Yes.

interface Thing {
    a: number;
    b: string;
    foo: {
        (s: string): string;
        (n: number): number;
        data: any;
    };
}

function process(x: Thing) {
    return x.foo.data;
}

In the above code, foo is a function, but it can also have a property named data.

Can we have a constructor function?

Yes.

interface Thing {
    a: number;
    b: string;
    foo: {
        (s: string): string;
        (n: number): number;
        data: any;
    };

    new (s: string): Element;
    [index: number]: Date;
}

In the above code, the new keyword specify a constructor function which accept a string as a parameter and return a type of Element. In the above code, Thing also act as an array of Date.

How can we specify the return type of a function?

interface Accumulator {
    clear(): void;
    add(x: number): void;
    result(): number;
}

function makeAccumulator(): Accumulator {
    var sum = 0;
    return {
        clear: function() { sum = 0; },
        add: function (value: number) { sum += value; },
        result: function() { return subm; }
    };
}

var a = makeAccumulator();
a.add(5);

Can TypeScript infer data type across event handling function?

Yes.

window.onmousemove = function(e) { e.clientX; }

In the above code, TypeScript knows that the event handling function takes a single parameter which represent an event object and it has the clientX and clientY properties, etc.

How can we define a class?

class Greeter {
    greeting: string;

    constructor(greeting: string) {
        this.greeting = greeting;
    }

    greet() {
        return "<h1>" + this.greeting + "</h1>";
    }
}

var greeter = new Greeter("Hello, world");
var str = greeter.greet();
document.body.innerHTML = str;

The above code is compiled to the following JavaScript:

var Greeter = (function() {
    function Greeter(greeting) {
        this.greeting = greeting;
    }
    Greeter.prototype.greet = function() {
        return ("<h1>" + this.greeting) + "</h1>";
    };
    return Greeter;
})();

var greeter = new Greeter("Hello, world!");
var str = greeter.greet();
document.body.innerHTML = str;

Another example:

class Point {
    x: number;
    y: number;

    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}
var p = new Point(10, 10);

The above TypeScript code compiles to:

var Point = (function() {
    function Point(x, y) {
        this.x = x;
        this.y = y;
    }
    return Point;
})();
var p = new Point(10,10);

How can we declare getter function?

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }

    get dist() {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    }
}

var p = new Point(10, 20);

How can we define static member?

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
    static orgin = new Point(0,0);
}

The above TypeScript code compile to:

var Point = (function() {
    function Point(x, y) {
        this.x = x;
        this.y = y;
    }

    Point.origin = new Point(0, 0);
    return Point;
})();

How can we define a private variable?

class Point {
    x: number;
    y: number;
    private color: string;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
        this.color = "red";
    }
    static orgin = new Point(0,0);
}

How can we specify default value?

class Point {
    private color: string;
    constructor(public x: number = 0, public y: number = 0) {
        this.color = "red";
    }
}

The above code simplifies things a bit. It allows us to shorten the declaration of x and y, and also allow us to specify default values for x and y.

How can we extend a class?

class Point3D extends Point {
    constructor(x: number, y: number, public z: number) {
        super(x,y);
    }

    dist() {
        var d = super.dist();
        return Math.sqrt(d * d + this.z * this.z);
    }
}

In the above code, notice the extends keyword and the super keyword.

How can we make a module with TypeScript?

module Utils {
    export class Tracker {
        count = 0;
        start() {
            window.onmousemove = e => {
                console.log(this.count);
            };
        }
    }
}

module Utils {
    export var greeting = "hello";
}

var t = new Utils.Tracker();
t.start();

Modules are open-ended. In the above code, notice that we use the module keyword twice with the same name. We can have multiples of these.

How can we use import?

module Acme.Core.Utils {
    export class Tracker {
        count = 0;
        start() {
            window.onmouseover = e => {
                console.log(this.count);
            };
        }
    }
}

import ACU = Acme.Core.Utils;
var t = new ACU.Tracker();
t.start();

Can we use TypeScript with Node?

Yes.

// server.ts:

import http = module("http");

export function simpleServer(port: number, message: string) {
    http.createServer((req, res) => {
        res.writeHead(200, {"Content-Type": "text/html"});
        res.write("<h1>" + message + "</h1>");
        res.end();
    }).listen(port);
}

// hello.ts:

import server = module("./server");
server.simpleServer(1337, "Greeting Channel 9");

How can we invoke the TypeScript compiler from command line?

tsc filename.ts
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License