Welcome

Angular-Tuto.com

Angular-Tuto.com

ECMASCRIPT ES7

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 et les versions suivantes. TypeScript est un langage de programmation, très récent, créé par Microsoft en 2012 afin de faire extension à JavaScript. Le but est de trouver un langage côté client qui est au même temps un langage orienté objet.

Pour mieux comprendre TypeScript je vous invite à regarder ECMAScript ES7 qui contient les normes suivies par TypeScript

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 peut être utilisé avec TypeScript).

TypeScript va ajouter l'aspect orienté objet à JavaScript et d’autres fonctionnalités. 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” et les fonctions JavaScript.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 ou 7 et des versions plus récentes. La communauté de TypeScript connaît, actuellement, une grande explosion en terme de taille.

Dans Angular 2,4,7 ... Nous utilisons ces nouvelles fonctionnalités. Donc on parle de TypeScript au lieu JavaScript.

Installation de TypeScript

TypeScript est un langage qui sera converti en JavaScript (Après ecrire votre code en TypeScript, le compilateur va le convertir automatiquement en JavaScript afin d'etre utiliser et iterpreter par tous les navigateurs qui supportent JavaScript).

Donc a besoin d’un compilateur. Ainsi,il faut installer ce compilateur avant de commencer le travail.

Plusieurs 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, 2017 ... ainsi que les versions futures et aussi l'update2 de Visual studio 2013 contiennent par défaut TypeScript.
O va faire ça ensemble dan le prochain article Environnement Angular .

Types des données dans TypeScript

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

  • 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

    Depuis l'exemple précédent 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.

    Symbole backquote Angular
  • 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 `;

    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. Mon âge sera 42 le mois prochain.

  • Les Expressions Intégrées

    Les variables dans TypeScript peuvents êtres déclaré 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 & 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 cas

    // Classe mère
    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

Conclusion

Voila, maintenant vous avez le bagage necessaire pour commencer votre premier projet Angular 7. Nous avons parlé de ECMAScript ES7 et d'TypeScript

Dans l'article suivant nous allons installer notre Environnement Angular et nous allons créer notre premier exemple 'Hello World Angular'.

Bonne lecture et n'oubliez pas de laisser vos commentaires et questions.


Commentaires (0)

Votre commentaire

  • Le Nom est obligatoire (entre 3 et 25 Lettres)
  • L'Email est obligatoire (Format valide)
  • Le Commentaire est obligatoire (entre 3 et 1000 Lettres)