Partie 1 : Découvrir Angular
Partie 2 : Acquérir les bases sur Angular
Partie 3 : Aller plus loin avec Angular
1 de 2

3. « Hello, TypeScript ! »

Pourquoi ne pas se familiariser avec TypeScript à travers une petite initiation ?

Je ne vous propose rien d’original, nous allons commencer par le traditionnel « Hello, World ! » avec TypeScript.

C’est parti, je vous propose de créer un dossier où vous le souhaitez sur votre ordinateur, l’emplacement n’a pas beaucoup d’importance. A la racine de ce dossier, créez un fichier test.ts, et ajoutez-y le code suivant :

// Fonction qui retourne un message de bienvenue 
function sayHello(person) { 
 return "Hello, " + person; 
} 
// Création d'une variable "Jean" 
var Jean = "Jean"; 
// On ajoute dans notre la page HTML un message 
// pour afficher "Hello, Jean". 
document.body.innerHTML = sayHello(Jean);

L’extension des fichiers TypeScript est .ts, et non .js . Pensez-y lorsque vous nommez vos fichiers !

Rien de passionnant vous me direz, et pourtant regardez tout ce qu’implique ce petit fichier :

  • Vous avez créé un fichier TypeScript. Si, si, même si vous pensez que c’est du JavaScript, il s’agit bien de TypeScript ! (regardez l’extension de votre fichier, il s’agit bien de test.ts et non de test.js). Et oui, le TypeScript sera compilé en JavaScript : donc si vous écrivez directement du JavaScript, cela ne pose pas de problème pour TypeScript. C’est l’avantage, TypeScript ne vous impose pas d’abandonner le JavaScript, il vient juste l’améliorer, et cette souplesse est très agréable !
  • Le revers de la médaille, c’est que le navigateur est bien incapable de lire du TypeScript, tant que celui-ci n’a pas été compilé en JavaScript !

Pour remédier à ce problème, nous allons installer le nécessaire pour transformer notre TypeScript en JavaScript. Toujours motivé ? Alors c’est parti !

Pour commencer, ouvrez un terminal et placez-vous à la racine de votre projet. Assurez-vous d’abord que Node.js et Npm sont installés, et vérifier leur versions respectives grâce aux commandes suivantes :

node -v
v10.15.3

Puis vérifiez aussi que vous avez aussi Npm d’installé :

npm -v
6.4.1

Si vous n’avez pas exactement les mêmes versions que moi, ce n’est pas grave. Par contre vous devez avoir au moins la version 10 pour Node. Si les deux commandes ci-dessus vous affichent une erreur, c’est probablement que vous n’avez pas installé Node. Vous allez en avoir besoin pour la suite, revenez à ce chapitre une fois que vous l’aurez installé.

Bon, ce n’est pas tout, mais nous devons installer le compilateur TypeScript. Il suffit d’une seule commande pour cela :

npm install –g typescript

Ensuite, vérifiez rapidement que l’installation a bien fonctionné :

tsc -v
version 3.4.5

Voilà, c’est aussi simple que ça !

Là aussi, la version a de l’importance. Essayez d’avoir au moins la version 3.4, mais pas en-dessous, ou vous serez bloqués dans la suite du cours. Je vous avais prévenu que c’était un écosystème bourgeonnant !

Mais le meilleur arrive, nous allons transformer notre code TypeScript en JavaScript grâce à la commande suivante :

tsc test.ts

Si vous regardez le contenu du dossier de votre application, vous verrez qu’un nouveau fichier est apparu : test.js !

Qu’est-ce que nous attendons pour ouvrir ce fichier qui a été créé spécialement pour nous ? Ouvrez donc  le fichier test.js avec votre éditeur de texte, voici ce qu’il devrait contenir :

// Fonction qui retourne un message de bienvenu 
function sayHello(person) { 
 return "Hello, " + person; 
} 
// Création d'une variable "Jean" 
var Jean = "Jean"; 
// On ajoute dans notre la page HTML un message 
// pour affiche "Hello, Jean". 
document.body.innerHTML = sayHello(Jean);

Mais rien n’a changé dans ce fichier, à part son extension ts en js !

Ben oui, c’est du JavaScript ! La seule chose que le compilateur a fait, c’est de supprimer les espaces entre les lignes ! Qu’est-ce que vous vouliez qu’il fasse, notre fichier initial ne contenait que du JavaScript.

Bon je vous rassure, on va faire des choses un peu plus intéressantes dans la suite de ce chapitre, c’était surtout pour vous montrer comment ça marche !

A quoi servent les fichiers de définition dans TypeScript ? Les fichiers avec l’extension *.d.ts ?

Si vous voulez utiliser des bibliothèques externes écrites en JavaScript, vous ne pouvez pas savoir le type des paramètres attendus par telle ou telle fonction d’une bibliothèque. C’est pourquoi la communauté TypeScript a créé des interfaces pour les types et les fonctions exposés par les bibliothèques JavaScript les plus populaires (comme jQuery par exemple). Les fichiers contenant ces interfaces ont une extension spéciale : *.d.ts. Ils contiennent une liste de toutes les fonctions publiques des librairies utilisées.

Mais concernant votre code, sachez que depuis TypeScript 1.6, le compilateur est capable de trouver tout seul ces interfaces avec les dépendances de notre répertoire node_modules. On n’a donc plus à le faire par nous-même !