Projet Web - Typescript
But de TypeScript : Permettre d’utiliser pleinement les fonctionnalités de JavaScript. En effet,
les navigateurs évoluent moins vite que les standards ECMAScript.
Ainsi, il y a un gouffre entre ce que nous développons comme fonctionnalités et ce qui marche
sur les navigateurs.
Lorsque l’on écrit en TypeScript, on peut pleinement utiliser les dernières normes
de ECMAScript car le code sera compilé et réécrit (avec un transpiler) dans un langage
JavaScript qui respecte une norme ECMAScript voulue.
Exercice TypeScript :
Le but de cet exercice est de permettre à l’étudiant de se familiariser avec ce langage qui
apporte une valeur ajoutée au Javascript c’est-à-dire découvrir les principales fonctionnalités
de Typescript et comprendre pourquoi elles sont utiles.
1. Installez TypeScript.
▪ Si vous possédez Node.js, utilisez l’invite de commande pour y exécuter la
commande suivante : npm install -g typescript
▪ Si vous utilisez un IDE tel que Visual Studio, téléchargez directement le
TypeScript SDK associé
Nous avons mis à votre disposition un fichier TypeScript exo_typescript.ts ainsi qu’un fichier
HTML exo_typescript.html qui nous servira par la suite.
2. Analysez le contenu du fichier exo_typescript.ts. Quelle(s) différence(s) remarquez-
vous avec du JavaScript que l’on a l’habitude de voir ?
3. Compilez le fichier exo_typescript.ts à l’aide de la commande :
▪ tsc exo_typescript.ts --target es6
Que dit le compilateur et Pourquoi ? Modifiez le code en conséquence.
4. Modifiez votre TypeScript pour qu’une Forme ne soit plus une ‘abstract class’ mais un
‘type’ qui définit les 3 formes. Le lien suivant vous explique clairement comment utiliser
les Type Aliases.
▪ http://www.typescriptlang.org/docs/handbook/advanced-types.html → partie
“Type Aliases”
Quel avantage permet cette notation ?
5. Pour vous montrer une dernière fonctionnalité, TypeScript propose un système de
modules qui permet d’isoler une partie de code souhaiter.
▪ Voir https://www.typescriptlang.org/docs/handbook/modules.html
Essayez de rendre votre Forme exportable/importable grâce à la notion de modularité.
Pour aller plus loin :
Si vous êtes adepte de ce langage, sachez que TypeScript et très complémentaire à Angular
pour par exemple un grand gain de lisibilité que ce soit par l’utilisation de classe ou par le
typage. Tuto : https://blog.xebia.fr/2014/03/12/angular-et-typescript-un-mariage-heureux/
