TypeScript

1. npm

La façon la plus rapide d’indiquer à un projet et à un environnement de développement que nous allons utiliser TypeScript est d’utiliser le gestionnaire de paquets officiel de Node.js. npm permet l’installation de paquets et de dépendances en s’appuyant sur les dépôts officiels. Plusieurs sources affirment que npm signifie Node Package Manager, mais cette théorie a été réfutée par son inventeur.

Positionnée à la racine du projet, la commande permettant d’installer TypeScript est :

npm install -g typescript 

TypeScript est très riche et en détailler toutes les facettes nécessiterait d’ écrire un ouvrage entier. Dans ce livre, seules les fonctionnalités utiles pour développer avec le framework Angular seront étudiées.

2. Création d’un fichier TypeScript

Visual Studio permet la création d’un fichier TypeScript rapidement puisqu’il suffit de créer un nouveau fichier avec l’extension .ts.

Afin de transcompiler un fichier et de l’intégrer à une page HTML, la commande à lancer dans un terminal Windows est :

tsc unFichierTypeScript.ts 

Ce qui a pour effet de créer un fichier unFichierTypeScript.js...

1. JavaScript et les erreurs de typage

L’un des principaux reproches faits à JavaScript concerne le fait qu’il ne soit pas fortement typé. En effet, une variable contenant une chaîne de caractères en début de programme peut tout à fait contenir un tableau au cours de l’exécution. 

Cette façon de procéder est qualifiée de souple dans le meilleur des cas, ou de complètement absurde dans d’autres cas. Elle est source de nombreuses erreurs puisque le développeur ne peut jamais être assuré du type de ses variables. 

Par exemple, dans une fonction, une addition de chiffres peut s’avérer catastrophique si, finalement, l’un des chiffres attendus est une chaîne de caractères. 

// C:\JavaScriptEtAngularJavaScript\C07\demonstration\
erreurDeTypage.ts 
// Fonctions 
function addition(chiffre01, chiffre02) { 
   return chiffre01 + chiffre02; 
} 
// Exploitation de la fonction addition 
let premierChiffre = 1; 
let deuxiemeChiffre = 3 
let chaineDeCaractere = "abc"; 
console.log(addition(premierChiffre, deuxiemeChiffre)); 
// Affiche 4 
console.log(addition(chaineDeCaractere, deuxiemeChiffre)); // /!\  
Affiche abc3 /!\ 

Utilisation de node pour exécuter un fichier TypeScript

2. TypeScript et le typage

TypeScript permet d’indiquer...

1. Généralités

Déclarer une fonction en utilisant TypeScript ajoute quelques éléments à sa signature.

// C:\JavaScriptEtAngularJavaScript\C07\demonstration\schtroumfs.ts 
function traducteurSchtroumfs(mot: string): string { 
   return "Schtroumfs"; 
} 
let phrase: string = "Quand un Schtroumpf se fait un bleu, c'est  
comme quand nous, on ne se fait rien."; 
let tabMots: string[] = phrase.split(' '); 
for (let i = 0; i < tabMots.length; i++) { 
   console.log(traducteurSchtroumfs(tabMots[i])); 
} 

Cette fonction prend un mot de type chaîne de caractères en argument et le traduit en langage Schtroumf en retournant une chaîne de caractères.

Utilisation d’une fonction typée avec des arguments typés

2. Fonctions particulières

let motTraduit = function traducteurSchtroumfs(mot: string):  
string { 
   return "Schtroumfs"; 
} 

1. Classe minimale

Grâce à TypeScript, les développeurs Java sont ravis puisque la syntaxe d’une classe TypeScript ressemble quasiment trait pour trait à celle d’une classe Java.

// C:\JavaScriptEtAngularJavaScript\C07\demonstration\voiture.ts 
// Définition de la classe Voiture 
class Voiture { 
} 
// Déclaration d'une nouvelle voiture 
let maVoiture = new Voiture(); 

Une classe TypeScript contient des attributs, un constructeur, des méthodes et des accesseurs.

2. Attributs

Les attributs sont précédés du mot-clé private afin de ne pas les rendre accessibles à partir de l’extérieur de la classe. La consultation ou la modification d’attributs se faisant grâce aux accesseurs.

// C:\JavaScriptEtAngularJavaScript\C07\demonstration\voiture.ts 
// Définition de la classe Voiture 
class Voiture { 
   // Attributs 
   private _kilometrage: number; 
   private _proprietaire: string; 
   private _couleur: string; 
} 
// Déclaration d'une nouvelle voiture 
let maVoiture = new Voiture(); 

3. Accesseurs

Les accesseurs permettent d’accéder aux attributs privés d’une classe et de les modifier. Plus simplement, les attributs auraient pu être déclarés publics pour être modifiés et consultés librement. Bien que plus simple, cette façon de faire est mauvaise puisqu’elle ne respecte pas le principe d’encapsulation.

En programmation orientée objet, il est primordial de cacher les attributs sensibles et de faire en sorte que chaque classe soit une boîte noire. Encapsuler, c’est donc rendre les attributs privés et proposer des accesseurs maîtrisés pour y accéder.

// C:\JavaScriptEtAngularJavaScript\C07\demonstration\voiture.ts 
// Définition de la classe Voiture 
class Voiture { 
   // Attributs 
   private _kilometrage: number; 
   private _proprietaire: string; 
   private _couleur: string; 
 
   // Getters 
   get kilometrage() { 
       return this._kilometrage; 
   } 
   get...

1. Énoncé

Créez une classe Personne possédant les attributs nom, prénom, sexe, âge, taille et poids, ainsi que tous les accesseurs et constructeurs que vous jugerez utile.

Créez ensuite une classe Etudiant qui hérite de la classe Personne et qui possède, en plus, un attribut indiquant dans quelle promotion un étudiant se trouve.

Finalement, créez une classe Formateur qui hérite de la classe Personne et qui possède un attribut supplémentaire qui est la liste des cours qu’un formateur est en mesure de délivrer. Créez la classe Cours au préalable.

Et pour finir, créez un objet, instance de Formateur, qui donne les cours de Java et de JavaScript. Puis affichez-le.

Affichage d’un formateur en utilisant TypeScript et les classes

2. Correction

// C:\JavaScriptEtAngularJavaScript\C07\miseEnPratique\main.ts 
module ENIecole { 
   export class Personne { 
       // Attributs 
       _nom: string; 
       _prenom: string; 
       _age: number; 
       _taille: number; 
       _poids: number; 
       // Getters 
       get nom() { 
           return this._nom; 
       } 
       get prenom() { 
           return...