Pour faire une application Web-based, TypeScript est un clair progrès par rapport à JavaScript: son système de typage statique permet de détecter de nombreuses erreurs directement dans l'éditeur, avant même d'exécuter le code. Le seul défaut de TypeScript, c'est que les browsers Web ne le comprennent pas nativement, ce qui exige de mettre en place quelques outils...
L'utilisation de TypeScript pour écrire une application web nécessite une étape de transpilation avant que le code puisse être utilisé dans une page HTML. De plus, si le code source se compose de plusieurs fichiers ou modules, on utilise généralement un bundler pour résoudre de manière statique les dépendances entre les modules. Tous ces outils doivent être correctement configurés pour fonctionner ensemble, et il est facile de perdre du temps à mettre en place la structure lors du lancement d'un nouveau projet. Pour vous faciliter la tâche, nous avons créé pour vous un modèle de projet où tout est correctement configuré.
Ce petit projet d'exemple a pour but de fournir une structure de base prête à l'emploi qui répond aux critères que nous considérons comme les plus importants :
- Pratique : un simple clic devrait suffire pour tester une modification du code ;
- Léger : le projet doit être simple et réduire au minimum les dépendances externes ;
- Interopérable : le projet doit permettre l'intégration de packages externes, soit sous forme de fichiers source, soit via un package manager;
- Portable : le projet ne doit pas poser d'exigences superflues concernant une version spécifique de Node.js ou de TypeScript à utiliser. Idéalement, il doit fonctionner avec toutes les versions prises en charge lors des 5 dernières années au moins.
Vous trouverez ce modèle de projet dans notre librairie TypeScript, dans le sous-répertoire example_html/Project-BoilerPlate. Nous l'avons également publié sous la forme d'un repository GitHub distinct au cas où il vous serait plus pratique de le cloner.
Configuration de l'environnement de développement
Selon le système d'exploitation que vous utilisez, nous vous recommandons l'utilisation des versions suivantes de Node.js:
- sur les systèmes d'exploitation 64 bits récents (Windows 10+, Linux, etc.) :
Installez n'importe quelle version de Node.js qui sont supportée (à ce jour, version 24 ou supérieure); - sur les systèmes d'exploitation 32 bits récents:
Utilisez Node.js version 22 (la dernière version prenant en charge le 32 bits); - sous Windows 7 :
Installez Node.js version 12, la dernière version LTS prise en charge pour Windows 7. Dans ce cas, vous devez également modifier package.json pour fixer les versions des dépendances suivantes :"@types/node": "^12.0.0",
"esbuild": "0.21.5",
"typescript": "5.0.4"
Une fois Node.js installé, ouvrez un terminal dans le répertoire du projet et exécutez:
npm install
Cela installera les dépendances du projet, à savoir le compilateur TypeScript et le bundler esbuild.
Si vous recevez une dizaine de warnings pendant l'installation d'esbuild, assurez-vous d'utiliser la version appropriée de Node.js comme recommandé ci-dessus, et d'avoir appliqué les modifications de package.json si vous utilisez Node 12. Dans le cas spécifique de Node 12, le package esbuild peut néanmoins émettre quelques avertissements, mais cela ne l'empêchera pas de fonctionner correctement.
Structure du projet
| Chemin | Description |
|---|---|
| src/** | Code source complet (TypeScript) |
| obj/** | Fichiers transpilés individuels |
| dist/** | Dossier de distribution (runtime) |
| tools/** | Outils de développement |
| package.json | Description du projet, y compris les dépendances |
| tsconfig.json | Fichier de paramètres globaux TypeScript |
Le point d'entrée de l'application est le fichier dist/app.html. C'est lui qui inclut le bundle de code TypeScript transpilé.
Le point d'entrée TypeScript est le fichier src/app.ts.
Test et débogage de l'application
Le projet modèle inclut une commande npm très pratique pour tester le code TypeScript. Pour l'utiliser, ouvrez un terminal et tapez :
npm run app-server
Cette commande va :
- Compiler le projet
- Démarrer un petit serveur Web (fourni dans le répertoire tools)
- Ouvrir un navigateur Web et lancer l'application à partir du petit serveur Web
- Surveiller les fichiers source TypeScript pour recompiler l'application de manière incrémentielle dès qu'un fichier source est modifié (watcher)
Lorsque vous apportez une modification au code source à l'aide de l'éditeur de votre choix, il vous suffit d'enregistrer le fichier TypeScript et d'appuyer sur le bouton Rafraîchir dans le navigateur. Le watcher se chargera de recompiler l'application de manière transparente.
Intégration de librairies tierces
Si vous souhaitez garder un contrôle total sur le code source de votre application, vous pouvez intégrer des librairies tierces directement sous forme de code source TypeScript, en ajoutant des sous-répertoires au répertoire src. C'est l'approche que nous avons choisie dans cet exemple pour intégrer la librairie Yoctopuce.
Pour intégrer une librairie tierce via un package manager, utilisez la commande habituelle npm install .... La librairie sera alors automatiquement intégrée selon les besoins par le bundler.
Remarque: Pour illustrer l'intégration de librairies tierces, une dépendance à la librairie uuid a été ajoutée artificiellement à ce projet. Cette librairie n'est pas requise par le framework de compilation lui-même; veillez à la désinstaller pour éviter de la conserver inutilement dans votre projet final.
Compilation du projet à l'aide d'une ligne de commande
Si vous souhaitez compiler l'ensemble du projet, tapez simplement :
npm run build
Une fois l'opération terminée, vous trouverez les fichiers de distribution dans le sous-répertoire dist/.
Il ne vous reste plus qu'à les poser sur n'importe quel serveur Web ou sur votre YoctoHub préféré.
Minimisation
Notez que nous avons activé dans les paramètre de esbuild la production d'un fichier bundle minimisé app.min.js. Tant que le fichier .map correspondant est fourni au navigateur au même endroit, le fait d'utiliser un fichier minimisé n'entrave pas du tout le debugging: les erreurs et le debugging peuvent se faire directement dans les fichiers sources en TypeScript. Mais si pour une raison ou une autre, vous préférez désactiver la minimisation, vous pouvez le faire. Il suffit de
- changer le paramètre minify à false dans app-server.ts (pour le watcher)
- supprimer l'option --minify dans package.json (pour la compilation par une ligne de commande)
