Chargement...

ANGULAR-TUTO.COM

Angular2 et TypeScript

Angular2 et TypeScript

Il est important de connaître que Angular 2 est créé avec le langage TypeScript. Alors c’est quoi TypeScript ? Quelle est la relation entre TypeScript et JavaScript ? Quels sont les nouvelles fonctionnalités de TypeScript?

Introduction

Il est primordiale de connaître TypeScript avant d’apprendre Angular2. TypeScript est un langage de programmation, très récent, créé par Microsoft en 2012 afin de faire extension pour JavaScript. Le but est de trouver un langage côté client qui est au même temps un langage orienté objet. TypeScript est un langage transcompilé en JavaScript. C.a.d après écrire un code en TypeScript un compilateur va convertir le code en JavaScript ainsi tous les navigateurs peuvent comprendre et interpréter ce code. Finalement, le gain que nous apporte TypeScript est que nous sommes entrain d'écrire du JavaScript avec un Syntaxe orienté objet.

Pourquoi écrire le code en TypeScript et non pas en JavaScript ?

En fait, Ceux qui sont familiarisés avec JavaScript n’auront pas des problèmes avec TypeScript. TypeScript est un superset (Sur-ensemble) de JavaScript (c'est-à-dire que tout code JavaScript correct peut être utilisé avec TypeScript). TypeScript va ajouter l'aspect orienté objet à JavaScript. Donc il est, désormais, possible d'écrire des classes, des interfaces, déclarer des Types au lieu d’utiliser simplement le fameux mot clé “var”.Il est possible, aussi, de faire l'héritage et de déclarer des constantes et des types génériques. Il supporte la spécification ECMAScript 6. La communauté de TypeScript connaît, actuellement, un grand explosion.

Installation de TypeScript

TypeScript est un langage qui sera converti à JavaScript. Donc a besoin d’un compilateur. Ainsi,il faut installer ce compilateur avant de commencer le travail. Deux méthodes pour installer TypeScript sur votre machine ou serveur:

  • A travers l’installation du plugin TypeScript sur Visual Studio
  • A travers npm (the Node.js package manager)

Visual Studio 2015,ainsi que les versions futures et L’Update2 de Visual studio 2013 contiennent par défaut TypeScript.

Types des données dans TypeScript

Avant d'entamer les différents types des données dans TypeScript il faut connaître:

Le mot clé “let”

Parmi les erreurs très connues, que plusieurs débutants en JavaScript la fait on cite la suivante:

 
var mavariable= 123;
if (true) {
    var mavariable= 456;
}
console.log(mavariable); //le résultat est: 456 et non pas 123
  

En fait, si on change la valeur de “mavariable” dans le bloc if (true) elle sera changée dans tout le reste du programme, car les accolades { } du if ne font pas la restriction des instruction. Si vous testez ce même code avec un autre langage comme C#. vous allez trouver que la valeur de mavariable change seulement dans le bloc if(true) et reprend sa valeur initiale (qui vaut 123) ailleurs. Pour cela TypeScript et ES6 ont introduit le mot clé let au lieu du mot clé var. Et dans ce cas mavariable elle sera déconnectée en dehors du scope voir exemple:

 
let mavariable= 123;
if (true) {
    let mavariable= 456;
}
console.log(mavariable); //le résultat est: 123 et non pas 456

Vous remarquez, donc, que mavariable a changé sa valeur seulement à l'intérieur du bloc if(true) par la suite elle a repris sa valeur initiale (123) en dehors. souvent en utilise le mot clé let dans les boucles. Exemple:


        var compteur= 0;
var array = [1, 2, 3];
for (let compteur= 0; index < array.length; compteur++) {
    console.log(array[compteur]);
}
console.log(compteur); // 0
        
                                

Dans cet exemple vous pouvez constater que la variable compteur (de la première ligne) est totalement séparée de celle à l'intérieur du boucle for et ça est dû à l’utilisation du mot clé let.

Le symbole backquote ( ` )

En cherchant sur internet pour une portion du code TypeScript, il est fortement probable que vous rencontrez une chaîne des caractères dans deux backquotes. Exemple ` Ma chaine des caractères `. ça vous permet d'écrire une chaîne des caractères sur plusieurs lignes. Par exemple, si on souhaite écrire une longue chaine de caractère HTML et qu’on l’assigne à une variable. Alors, il vaut mieux écrire cette chaîne HTML sur plusieurs lignes pour qu’elle soit lisible pour les humains. Ainsi on utilise (`) Au lieu de la simple cotte ou bien cotte double.

Les Expressions Intégrées

On utilise les expressions intégrées pour évaluer le résultat d’une équation mathématique ou n’importe quelle expression.


let Monnom: string = `BEN SAID`;
let age: number = 41;
let introduction: string = `Bonjour, Je suis ${ Monnom}.

Mon age sera ${ age + 1 } le mois prochain.`
     

Le résultat de cette expression sera: Bonjour, Je suis BEN SAID. Mon age sera 42 le mois prochain.

Les Expressions Intégrées:

Les variables dans TypeScript peuvent être déclarées de deux façons (Explicite ou implicite). Dans la façon explicite: il faut mentionner le type de la variable à déclarer. Cette variable gardera toujours ce type durant tout le reste de l’application


    var foo: number = 123;  
//Il est possible de déclarer le Type de la variable implicitement. C.a.d que la variable prend le type de sa valeur.
//var foo = 123; 
foo = 'Bonjour'; //Erreur
  
                                

Ici la variable foo est implicitement un number (entier) donc la deuxième ligne dans laquelle on essaie de lui affecter une chaîne de caractère va générer une erreur. Donc, avec TypeScript il est possible de déclarer le type des variables au lieu d’utiliser le mot clé var

Null and Undefined

comment faire le test pour savoir si une variable est null ou non ? Voilà un exemple:


console.log(undefined == undefined); // true 
console.log(null == undefined); // true 
console.log(0 == undefined); // false 
console.log('' == undefined); // false 
console.log(false == undefined); // false 
    
                                
Les Classes

Comme on a mentionné, précédemment, on peut utiliser les classes pour définir nos propres Types. On peut définir une classe en respectant la structure suivante:


    class Batiment {
    hauteur: number;
    largeur: number;
    constructor(x: number, y: number) {
        this.hauteur = x;
        this.largeur = y;
    }
    add(Batiment : b) {           // une méthode add(,)
        return new Batiment (this.x + b.x, this.y + b.y);
    }
}

var p1 = new Batiment (0, 10);
var p2 = new Batiment (10, 20);
var p3 = p1.add(p2); // Result est {x:10,y:30}
    

La classe peut définir:
- Des membres comme X et Y
- Des Méthodes comme add(Batiment , Batiment )
- Aussi des constructeurs en utilisant le mot clé constructor()
- Des instances en utilisant le mot clé new

heritage

Dans TypeScript comme dans C# ou Java il supporte l'héritage simple et non pas multiple. L'héritage se fait en utilisant le mot clé extend


class Maison extends Batiment {
    static nb_total_maisons= 0
    nb_chambres: number;
    constructor(x: number, y: number, z: number) {
        super(x, y);
        this.nb_chambres = z;
    }
   }

Dans cet exemple on a créé une nouvelle classe “Maison” qui hérite de la classe précédente “Batiment”. Cette nouvelle classe a un membre supplémentaire “nb_chambres”. Le constructeur de la classe Maison lui aussi fait appel au constructeur de sa classe mère en utilisant le mot clé super. TypeScript nous donne la possibilité, aussi, de déclarer des variables globales en utilisant le mot clé static. Ce qui nous permet, dans notre exemple de partager cette variable entre les différentes instances. Ici la variable nb_total_maisons est une variable globale.

les accesseurs

Type Script supporte les accesseurs suivants: (public, protected et private). Le Tableau suivant résume la visibilité des variables qui utilisent ses accesseurs. Si l’accesseur n’est pas mentionné, donc il sera public par défaut. L’exemple suivant traite quelques


class ClasseA {
    public x: number;
    private y: number;
    protected z: number;
}

// EFFET avec les  INSTANCES
var ins1 = new ClasseA();
ins1.x; // ok
ins1.y; // ERREUR :car la variable x est private
ins1.z; // ERREUR :car la variable z est protected

// EFFECT SUR LES CLASSES FILLES
class ClasseB extends ClasseA {
    constructor() {
      super();
        this.x; // ok
        this.y; // ERREUR :car la variable x est private
        this.z; // ok
    }
}

Classe Abstraite

Parmi les nouveautés dans TypeScript c’est l’introduction de la notion d’abstraction pour les classes. Comme vous le savez, Une classe abstraite n’est pas instanciable. Elle doit être héritée par une autre classe fille qui implémente les membres abstraits.

Boucle for..of

Une erreur très connue, que plusieurs débutants fait est de faire une itération sur un tableau ou une collection de la manière suivante:


    var mon_tableau= [9, 2, 5];
for (var item in mon_tableau) {
    console.log(item); // 0,1,2
}
    

Le résultat dans l’exemple précédent est 0,1,2 pourtant qu’on attend que le résultat soit 9,2,5. Donc il faut écrire l'itération autrement en utilisant la structure for .. of:


var mon_tableau= [9, 2, 5];
for (var item of mon_tableau) {
    console.log(item); // 9,2,5
}
Enumerations

Les énumérations sont des types qui permettent de structurer les collections sous forme numérique. D’autres langages comme C#, Java, PHP définissent les énumérations. Aussi TypeScript étends JavaScript pour définir des énumérations.


enum Sports{
    Foot,
    Hand,
    Baskette,
    Golf
}

// Sample usage
var monSportPrefere= Sports.Golf;

// Safety
monSportPrefere= "Footing"; // Erreur : ça engendre une erreur car footing ne fait pas partie de l’enumeration