Mois : février 2020

TypeScript est un langage à typage fort typé, orienté objet et compilé. TypeScript est un sur-ensemble typé de JavaScript compilé en JavaScript. TypeScript est JavaScript et quelques fonctionnalités supplémentaires.

La documentation de typescript est disponible sur ce lien : https://www.typescriptlang.org/docs/home.html

Installation de TypeScript :

sudo npm install -g typescript

Execution du compilateur TypeScript :

tsc --version

Création d’un premier exemple TypeScript :

Création du fichier test.ts :

function salutation(nom) {
    console.log("Bonjour, " + nom);
}

var nomUtilisateur = "John";
salutation(nomUtilisateur);

Compilation du code :

tsc test.ts

A l’issue de la commande un fichier test.js est créé que l’on peut alors visualiser :

function salutation(nom) {
    console.log("Bonjour, " + nom);
}
var nomUtilisateur = "John";
salutation(nomUtilisateur);

On constate que pour cet exemple le code est le même en javascript et en typescript, on peut exécuter :

>node test.js
Bonjour, John

Définition d’une variable avec TypeScript :

Il est possible de déclarer une variable avec var qui est classique en javascript ou avec let qui est plus sécurisé avec TypeScript. Déclarer une variable avec var lui confère un scope global c’est à dire que la variable est disponible dans tout le code, let limite le scope de la variable au « nearest block »

Exemple 1 : utilisation de var (scope global)

function affichage(test) {
    var compte = 1;

    if (test) {
        var augmentation = compte + 5;
        return augmentation;
    }

    return augmentation;
}


affichage(false);

Ce code compile mais comporte des risques car la variable augmentation n’a pas été déclarée si le paramètre test = false.

Exemple 2 : utilisation de less (scope limited to nearest block)

Pour le code suivant, la compilation est en erreur en raison de la limitation du scope de la variable augmentation.

function affichage(test) {
    let compte = 1;

    if (test) {
        let augmentation = compte + 5;
        return augmentation;
    }

    // Erreur la variable n'existe pas
    return augmentation;
}
affichage(true);

>tsc test.ts
test.ts:10:12 - error TS2304: Cannot find name 'augmentation'.

Typage en TypeScript :

let compte = 10
compte = 'hello'

La compilation du code ci-dessus confirme le typage fort du langage, lors de la compilation l’erreur suivante est levée :

>tsc test.ts
test.ts:2:1 - error TS2322: Type '"hello"' is not assignable to type 'number'.

Annotation de type en TypeScript :

Les types suivants peuvent être annotés en TypeScript :

let a : number; //entier et décimal
let b : boolean;
let c : string;
let d : any;
let e : number[];
let f : number[] = [4, 5, 6];
let g : any[]    = [4, 'Hello', true, 6];
const letterA = 'A';
const couleurVert = 1;

Énumération en TypeScript :

enum Direction {
    enHaut = 1,
    enBas = 2,
    aGauche = 3,
    aDroite = 4
}

let prochaineDirection = Direction.enHaut;

Si on regarde le code ci-dessus après compilation par tsc on observe que le code TypeScript est nettement plus confortable que celui en JavaScript :

var Direction;
(function (Direction) {
    Direction[Direction["enHaut"] = 1] = "enHaut";
    Direction[Direction["enBas"] = 2] = "enBas";
    Direction[Direction["aGauche"] = 3] = "aGauche";
    Direction[Direction["aDroite"] = 4] = "aDroite";
})(Direction || (Direction = {}));
var prochaineDirection = Direction.enHaut;