1
2
3
4
5
6
7
8
9
10
11
12
13
type Callback = (error?: Error, data?: number) => void;
 
function getData(callback: Callback) {
    setTimeout(function setTimeoutCB(counter: number) {
        if (Math.random() < 0.25) {
            callback(new Error("Error in retrieving data."));
        }
        else {
            let data = Math.random();
            callback(undefined, data);
        }
    }, 500);
} // getData

1
2
3
4
5
6
7
8
9
10
function process1() {
    getData((error, data) => {
        if (error)
            console.log(error);
        else {
            console.log("Process 1:", data);
            process2();
        }
    });
} // process1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function process2() {
    getData((error, data) => {
        if (error)
            console.log(error);
        else {
            console.log("Process 2:", data);
            process3();
        }
    });
} // process2
 
function process3() {
    getData((error, data) => {
        if (error)
            console.log(error);
        else {
            console.log("Process 3:", data);
        }
    });
} // process3

1
2
3
Process 1: 0.062177133421918995
Process 2: 0.2886812664927907
Process 3: 0.2154450024357153

1
2
3
4
5
6
Process 1: 0.41092615721662096
Error: Error in retrieving data.
    at Timeout.setTimeoutCB [as _onTimeout] (callback.js:13:22)
    at ontimeout (timers.js:386:14)
    at tryOnTimeout (timers.js:250:5)
    at Timer.listOnTimeout (timers.js:214:5)

1
2
3
new Promise((resolve, reject) => {
 /* appel à la fonction asynchrone */
});

1
2
3
4
5
6
7
8
9
10
11
type PromiseResolve<T> = (value?: T | PromiseLike<T>) => void;
type PromiseReject = (error?: any) => void;
 
function getDataPromise() {
    return new Promise((resolve: PromiseResolve<number>, reject: PromiseReject): void => {
        getData((error, data) => {
            if (error) reject(error)
            else resolve(data)
        });
    });
} // getDataPromise

1
2
3
4
5
6
getDataPromise().then(
    data => { // resolve()
        console.log("Process 1:", data);
        return getDataPromise();
    }
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
getDataPromise()
    .then(
        data => { // resolve()
            console.log("Process 1:", data);
            return getDataPromise();
        },
        error => { // reject()
            console.log(error);
        })
    .then(
        data => { // resolve()
            console.log("Process 2:", data);
            return getDataPromise();
        },
        error => { // reject()
            console.log(error);
        })
    .then(
        data => { // resolve()
            console.log("Process 3:", data);
        },
        error => { // reject()
            console.log(error);
        })
;

1
2
3
Process 1: 0.9523288000061796
Process 2: 0.7071524761970143
Process 3: 0.31277126054349025

1
2
3
4
5
6
7
Process 1: 0.6955174514497151
Error: Error in retrieving data.
    at Timeout.setTimeoutCB [as _onTimeout] (promise.js:13:22)
    at ontimeout (timers.js:386:14)
    at tryOnTimeout (timers.js:250:5)
    at Timer.listOnTimeout (timers.js:214:5)
Process 3: undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
getDataPromise()
    .then(
        data => { // resolve()
            console.log("Process 1:", data);
            return getDataPromise();
        })
    .then(
        data => { // resolve()
            console.log("Process 2:", data);
            return getDataPromise();
        })
    .then(
        data => { // resolve()
            console.log("Process 3:", data);
        })
    .catch(error => { // reject()
        console.log(error);
    })
;

1
2
3
Process 1: 0.29398199861957175
Process 2: 0.9661893214860926
Process 3: 0.9223972522278627

1
2
3
4
5
6
Process 1: 0.20758402318588276
Error: Error in retrieving data.
    at Timeout.setTimeoutCB [as _onTimeout] (promise.js:13:22)
    at ontimeout (timers.js:386:14)
    at tryOnTimeout (timers.js:250:5)
    at Timer.listOnTimeout (timers.js:214:5)

1
2
3
4
5
6
7
8
9
Promise.all([getDataPromise(), getDataPromise(), getDataPromise()])
    .then(
        data => {
            console.log("Success!", data);
        })
    .catch(error => {
        console.log(error);
    })
;

Success! [ 0.5930896059730313, 0.4881301731930028, 0.338379519116232 ]

1
2
3
4
5
6
7
8
9
Promise.race([getDataPromise(), getDataPromise(), getDataPromise()])
    .then(
        data => {
            console.log("Success!", data);
        })
    .catch(error => {
        console.log(error);
    })
;

Success! 0.2673875038150235

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/// <reference path="paon.d.ts" />
 
class Subject {
	private name: string;
	observable: Paon.Observable; // Composant Observer Pattern
 
	constructor(name: string) {
		this.name = name;
		this.observable = new Paon.Observable(); // Instanciation / Initialisation
	}
 
	changeName(name: string): string {
		this.name = name;
		this.observable.notifyObservers("nameChanged"); // Un message est envoyé aux observateurs
		return this.name;
	}
}
 
function onNameChanged() {
	alert("Name has changed");
}
 
let subject = new Subject("Penelope");
 
subject.observable.addObserver("nameChanged", onNameChanged); // La fonction onNameChanged() souscrit aux messages "nameChanged" du sujet
 
subject.changeName("Melissa");
// Une popup d'alerte apparaît: "Name has changed"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/// <reference path="paon.d.ts" />
 
class Subject {
	private name: string;
	observable: Paon.Observable; // Composant Observer Pattern
 
	constructor(name: string) {
		this.name = name;
		this.observable = new Paon.Observable(); // Instanciation / Initialisation
	}
 
	changeName(name: string): string {
		this.name = name;
		this.observable.notifyObservers("nameChanged", { data: name }); // Un message avec une donnée complémentaire est envoyé aux observateurs
		return this.name;
	}
}
 
function onNameChanged(msg: { data: string }) {
	alert("Name has changed into " + msg.data);
}
 
let subject = new Subject("Penelope");
 
subject.observable.addObserver("nameChanged", onNameChanged); // La fonction onNameChanged() souscrit aux messages "nameChanged" du sujet
 
subject.changeName("Melissa");
// Une popup d'alerte apparaît: "Name has changed into Melissa"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import Paon from "./paon"; // Emplacement du fichier de déclaration .d.ts
 
class Subject {
	private name: string;
	observable: Paon.Observable; // Composant Observer Pattern
 
	constructor(name: string) {
		this.name = name;
		this.observable = new Paon.Observable(); // Instanciation / Initialisation
	}
 
	changeName(name: string): string {
		this.name = name;
		this.observable.notifyObservers("nameChanged", { data: name }); // Un message avec une donnée complémentaire est envoyé aux observateurs
		return this.name;
	}
}
 
function onNameChanged(msg: { data: string }) {
	alert("Name has changed into " + msg.data);
}
 
let subject = new Subject("Penelope");
 
subject.observable.addObserver("nameChanged", onNameChanged); // La fonction onNameChanged() souscrit aux messages "nameChanged" du sujet
 
subject.changeName("Melissa");
// Une popup d'alerte apparaît: "Name has changed into Melissa"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function A() {
    // Etat 1
    B();
    // Etat 5
}
 
function B() {
    // Etat 2
    C();
    // Etat 4
}
 
function C() {
    // Etat 3
}
 
// Etat 0
A();
// Etat 6

1
2
3
4
5
6
7
8
9
10
11
var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.onreadystatechange = function callback(aEvt) { // fonction callback
  if (req.readyState == 4) {
     if(req.status == 200)
      dump(req.responseText);
     else
      dump("Erreur pendant le chargement de la page.\n");
  }
};
req.send(null); // traitement asynchrone

1
2
3
4
5
6
var fs = require('fs');
 
// traitement asynchrone
fs.readFile('DATA', 'utf8', function callback(err, contents) { // fonction callback
    console.log(contents);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var k = 0;
 
// Définition de la fonction getData()
 
function getData(callback) {
    console.log('getData()');
 
    setTimeout(function setTimeoutCB(counter) { // callback asynchrone
        console.log('setTimeoutCB()');
        callback(null, counter);
    }, 500, ++k);
}
 
// Appel de la fonction getData()
 
getData(function getDataCB(error, data) { // callback synchrone
    console.log('getDataCB()');
 
    console.log('data: ', data);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// tsconfig.json
 
{
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es5",
        "module": "commonjs",
        "outDir": "./build"
    },
    "exclude" : [
        "./build",
        "./node_modules"
    ]
}

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <meta charset="utf-8"> 
    <head>
        <title>Simple nodeJS application in TypeScript</title>
    </head>
    <body>
        <h1>Simple nodeJS application in TypeScript</h1>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// server.ts
 
import http = require('http');
import os = require('os');
import fs = require('fs');
 
class HttpServer {
    nodePort: number;
 
    constructor (port: number) {
        this.nodePort = port;
    }
 
    onRequest(request: http.ServerRequest, response: http.ServerResponse) {
        console.log('New request: ' + request.url);
 
        fs.readFile('./index.html', (err: Error, data: Buffer) => {
            if (err) {
                throw err;
            }
            response.writeHead(200, {'Content-Type': 'text/html'});
            response.write(data);
            response.end();
        });
    }
 
    onStart() {
        let httpServer = http.createServer(this.onRequest);
        httpServer.listen(this.nodePort);
        console.log('Server listenning on http://' + os.hostname() + ':' + this.nodePort + '/');
    }
}
 
let server = new HttpServer(8080).onStart();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// tsconfig.json
 
{
    "compilerOptions": {
        "noImplicitAny": true,
        "strictNullChecks": true,
        "target": "es5",
        "module": "amd",
        "outDir": "./build"
    },
    "exclude" : [
        "./build",
        "./node_modules"
    ]
}

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <meta charset="utf-8"> 
    <head>
        <title>Importation de modules externes en TypeScript</title>
        <script data-main="build/config.js" src="node_modules/requirejs/require.js"></script>
    </head>
    <body>
        <h1>Importation de modules externes en TypeScript</h1>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// config.ts
 
require(
    ['app'],
 
    function (app: any) {
        app.start();
    },
 
    function (err: any) {
        console.error('ERROR: ', err.requireType);
        console.error('MODULES: ', err.requireModules);
    }
);

1
2
3
4
5
6
7
8
9
10
11
// app.ts
 
import * as Animal from "animal"; // Module TS
 
export function start() {
    let garry = new Animal.Snail('Garry');
    let simbad = new Animal.Lion('Simbad', Animal.Sex.MALE);
 
    console.log(garry.name);
    console.log(simbad.name, simbad.sex);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// animal.ts
 
export abstract class Animal {
    name: string;
 
    constructor(name: string) {
      this.name = name;
    }
 
    abstract shout(): string;
}
 
export class Snail extends Animal {
    shout(): string {
        return '...';
    }
}
 
export enum Sex { MALE, FEMALE };
 
export class Lion extends Animal {
    sex: Sex;
 
    constructor(name: string, sex: Sex) {
        super(name);
        this.sex = sex;
    }
 
    shout(): string {
        return 'Rooooaarrr!'
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
// app.js
 
define(["require", "exports", 'animal'], function (require, exports, Animal) {
    "use strict";
    function start() {
        var garry = new Animal.Snail('Garry');
        var simbad = new Animal.Lion('Simbad', Animal.Sex.male);
        console.log(garry.name);
        console.log(simbad.name, simbad.sex);
    }
    exports.start = start;
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// animal.js
 
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports"], function (require, exports) {
    "use strict";
    var Animal = (function () {
        function Animal(name) {
            this.name = name;
        }
        return Animal;
    }());
    var Snail = (function (_super) {
        __extends(Snail, _super);
        function Snail() {
            _super.apply(this, arguments);
        }
        Snail.prototype.shout = function () {
            return '...';
        };
        return Snail;
    }(Animal));
    exports.Snail = Snail;
    (function (Sex) {
        Sex[Sex["male"] = 0] = "male";
        Sex[Sex["female"] = 1] = "female";
    })(exports.Sex || (exports.Sex = {}));
    var Sex = exports.Sex;
    ;
    var Lion = (function (_super) {
        __extends(Lion, _super);
        function Lion(name, sex) {
            _super.call(this, name);
            this.sex = sex;
        }
        Lion.prototype.shout = function () {
            return 'Rooooaarrr!';
        };
        return Lion;
    }(Animal));
    exports.Lion = Lion;
});

1
2
3
4
5
6
7
8
// config.js
 
require(['app'], function (app) {
    app.start();
}, function (err) {
    console.error('ERROR: ', err.requireType);
    console.error('MODULES: ', err.requireModules);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// animal.js
 
export class Animal {
    constructor(name) {
      this.name = name;
    }
 
    shout() {}
}
 
export class Snail extends Animal {
    shout() {
        return '...';
    }
}
 
export const Sex = { MALE: 0, FEMALE: 1 };
 
export class Lion extends Animal {
    constructor(name, sex) {
        super(name);
        this.sex = sex;
    }
 
    shout() {
        return 'Rooooaarrr!'
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// animal.d.ts
 
export declare abstract class Animal {
    name: string;
    constructor(name: string);
    abstract shout();
}
 
export declare class Snail extends Animal {
    shout();
}
 
export declare enum Sex { MALE, FEMALE }
 
export declare class Lion extends Animal {
    sex: Sex;
    constructor(name: string, sex: Sex);
    shout();
}

1
2
3
4
5
6
7
8
9
10
11
// app.ts
 
import * as Animal from "animal"; // Module ES2015
 
export function start() {
    let garry = new Animal.Snail('Garry');
    let simbad = new Animal.Lion('Simbad', Animal.Sex.MALE);
 
    console.log(garry.name);
    console.log(simbad.name, simbad.sex);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// tsconfig.json
 
{
    "compilerOptions": {
        "noImplicitAny": true,
        "strictNullChecks": true,
        "target": "es5",
        "module": "amd",
        "outDir": "./build",
        "allowJs": true
    },
    "exclude" : [
        "./build",
        "./node_modules"
    ]
}

1
2
3
4
5
6
7
// mineral.js
 
class Mineral {
    constructor(name) {
        this.name = name;
    }
}

1
2
3
4
5
6
7
8
// metal.js
 
class Metal extends Mineral {
    constructor(name, meltingPoint) {
        super(name);
        this.meltingPoint = meltingPoint;
    }
}

1
2
3
4
5
6
7
8
// mineral.d.ts
 
declare abstract class Mineral {
    name: string;
    constructor(name: string);
}
 
export = Mineral;

1
2
3
4
5
6
7
8
// metal.d.ts
 
declare class Metal extends Mineral {
    meltingPoint: number;
    constructor(name: string, meltingPoint: number);
}
 
export = Metal;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// config.ts
 
require.config({
    shim: {
        'mineral': {
            exports: 'Mineral'
        },
        'metal': {
            deps: ['mineral'],
            exports: 'Metal'
        }
    }
});
 
require(
    ['app'],
 
    function (app: any) {
        app.start();
    },
 
    function (err: any) {
        console.error('ERROR: ', err.requireType);
        console.error('MODULES: ', err.requireModules);
    }
);

1
2
3
4
5
6
7
8
9
// app.ts
 
import Metal = require('metal'); // JavaScript à plat
 
export function start() {
    let gold = new Metal('Gold', 1064);
 
    console.log(gold.name, gold.meltingPoint);
}

1
2
3
4
5
6
7
8
9
// app.ts
 
import $ = require("jquery");
import _ = require("underscore");
 
export function start() {
    $("h1").hide();
    console.log(_.isEmpty({}));
}

1
2
3
4
5
// node_modules/@types/jquery/index.d.ts
 
declare module "jquery" {
    export = $;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// tsconfig.json

{
    "compilerOptions": {
        "noImplicitAny": true,
        "strictNullChecks": true,
        "target": "es5",
        "module": "amd",
        "moduleResolution": "node",
        "allowJs" : true,
        "outDir": "./build"
    },
    "exclude" : [
        "./build",
        "./node_modules"
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// config.ts
 
require.config({
    paths: {
        jquery: '../node_modules/jquery/dist/jquery',
        underscore: '../node_modules/underscore/underscore'
    }
});
 
require(
    ['app'],
 
    function (app: any) {
        app.start();
    },
 
    function (err: any) {
        console.error('ERROR: ', err.requireType);
        console.error('MODULES: ', err.requireModules);
    }
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var displayDiv = document.getElementById("displayDiv");
 
// Part 1 - Defining what do we want to do with the result
var processJSON = function (json) {
    var result = JSON.parse(json);
 
    result.collection.forEach(function(card) {
        var div = document.createElement("div");
        div.innerHTML = card.name + " cost is " + card.price;
 
        displayDiv.appendChild(div);
    });
}
 
// Part 2 - Providing a function to display errors
var displayError = function(error) {
    displayDiv.innerHTML = error;
}
 
// Part 3 - Creating and setting up the XHR object
var xhr = new XMLHttpRequest();
 
xhr.open('GET', "cards.json");
 
// Part 4 - Defining callbacks that XHR object will call for us
xhr.onload = function(){
    if (xhr.status === 200) {
        processJSON(xhr.response);
    }
}
 
xhr.onerror = function() {
    displayError("Unable to load RSS");
}
 
// Part 5 - Starting the process
xhr.send();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var displayDiv = document.getElementById("displayDiv");
 
// Part 1 - Create a function that returns a promise
function getJsonAsync(url) {
    // Promises require two functions: one for success, one for failure
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
 
        xhr.open('GET', url);
 
        xhr.onload = () => {
            if (xhr.status === 200) {
                // We can resolve the promise
                resolve(xhr.response);
            } else {
                // It's a failure, so let's reject the promise
                reject("Unable to load RSS");
            }
        }
 
        xhr.onerror = () => {
            // It's a failure, so let's reject the promise
            reject("Unable to load RSS");
        };
 
        xhr.send();
    });
}
 
// Part 2 - The function returns a promise
// so we can chain with a .then and a .catch
getJsonAsync("cards.json").then(json => {
    var result = JSON.parse(json);
 
    result.collection.forEach(card => {
        var div = document.createElement("div");
        div.innerHTML = `${card.name} cost is ${card.price}`;
 
        displayDiv.appendChild(div);
    });
}).catch(error => {
    displayDiv.innerHTML = error;
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Let's create an async anonymous function
(async function() {
    try {
        // Just have to await the promise!
        var json = await getJsonAsync("cards.json");
        var result = JSON.parse(json);
 
        result.collection.forEach(card => {
            var div = document.createElement("div");
            div.innerHTML = `${card.name} cost is ${card.price}`;
 
            displayDiv.appendChild(div);
        });
    } catch (e) {
        displayDiv.innerHTML = e;
    }
})();

1
2
3
4
var myCode = 'var a=1; for(var i=0;i<4;i++){a*=i;} a;';
var myInterpreter = new Interpreter(myCode);
myInterpreter.run();
var result = myInterpreter.value;

1
2
3
4
5
6
7
8
9
10
11
12
function square(x) {
    return x * x;
}

var initFunc = function(interpreter, scope) {
    var wrapper = function(x) {
        return interpreter.createPrimitive(square(x));
    };
    interpreter.setProperty(scope, 'square', interpreter.createNativeFunction(wrapper));
};

var myInterpreter = new Interpreter('var y = square(5)', initFunc);