Installing & Using TypeScript

Instructeur : TypeScript peut donc vous aider à détecter les erreurs plus tôt. Cependant, TypeScript présente un inconvénient majeur, à savoir que ce code, ce code TypeScript stocké dans ce fichier . ts ne s'exécute pas dans le navigateur. Vous pouvez écrire du code TypeScript dans vos projets, mais vous ne pouvez pas l'exécuter de cette manière dans le navigateur. Maintenant, c'est différent si vous construisez pour le backend, pour Node. js car il existe des outils et des moteurs d'exécution qui vous permettent d'exécuter du code TypeScript sans étape de construction supplémentaire. Mais lorsqu'il s'agit de l'exécuter dans le navigateur, cela ne fonctionne pas. Au lieu de cela, ce qu'il faut faire avec un code TypeScript comme celui-ci pour qu'il fonctionne dans le navigateur, c'est le compiler. Vous devez convertir ce code TypeScript en code JavaScript pur. Une étape de compilation est nécessaire. C'est pourquoi TypeScript ne consiste pas seulement à écrire du code TypeScript, mais aussi à compiler ce code TypeScript. C'est pourquoi la page de documentation officielle comporte également une zone de téléchargement où vous trouverez des instructions sur la manière de télécharger le compilateur TypeScript, un outil qui convertira le code TypeScript en code JavaScript. Il ne vous reste plus qu'à suivre les instructions de cette page. Je vais suivre cette instruction ici, qui installera TypeScript globalement sur mon système. Ou plus précisément, qui installera le compilateur TypeScript globalement sur mon système, afin que je puisse l'utiliser n'importe où dans n'importe quel projet. Plus tard dans le cours, je vous montrerai également comment vous pouvez ajouter TypeScript à des projets individuels et comment vous pouvez mettre en œuvre cette étape de compilation dans un processus plus général de construction de projet. Pour l'instant, concentrons-nous sur cette approche globale. Cette approche utilise npm pour installer TypeScript en tant qu'outil global sur votre système. Et npm est un gestionnaire de paquets qui accompagne Node. js. C'est pourquoi vous devriez visiter nodejs. org, et de là, téléchargez la dernière version LTS de Node. js puisque cela inclura ce gestionnaire de paquets, cet outil npm. Une fois que vous avez installé Node. js, et avec lui, npm, vous pouvez exécuter cette commande ici dans l'invite de commande de votre système ou dans le terminal pour installer globalement TypeScript sur votre système. Ici, je suis sur Mac OS, j'ai donc ouvert mon terminal, et je vais lancer npm install -g pour l'installer globalement, typescript. Sous Windows, c'est exactement la même commande, il suffit d'utiliser l'invite de commande par défaut pour l'exécuter. Maintenant, vous devez vous assurer que vous avez obtenu Node. js installé comme indiqué, et sur Mac OS analytics, vous devrez peut-être ajouter sudo devant cette commande pour lui donner les bonnes permissions. Vous risquez d'obtenir une erreur de permission sans sudo, sous Windows, cela ne fonctionnera pas et ne sera pas non plus nécessaire. Il se peut que l'on vous demande votre mot de passe, mais ensuite, cela vous permettra d'installer TypeScript, ou plus précisément, le compilateur TypeScript sur votre système. Une fois installé, vous pouvez aller dans votre projet où vous utilisez TypeScript, ouvrir votre terminal système là aussi. Soit celui qui est intégré à votre éditeur de code, comme je le fais ici en utilisant le terminal intégré à Visual Studio Code, soit vous utilisez votre invite de commande par défaut ou votre terminal en dehors de l'éditeur, et vous naviguez dans le dossier de votre projet via la commande CD. Quoi qu'il en soit, vous devez vous assurer que votre terminal est ouvert, et que vous naviguez dans ce dossier de projet, de sorte que vous puissiez commencer le processus de compilation de cette calculatrice. ts en exécutant tsc, puis le nom du fichier, du fichier TypeScript qui contient le code à compiler. tsc est une commande qui sera disponible puisque vous avez installé TypeScript globalement. Le compilateur TypeScript sera ainsi invoqué et produira une calculatrice. js dans ce cas. Et si vous inspectez ce fichier et que vous le comparez au fichier TypeScript, vous verrez qu'il s'agit à peu près du même code, il n'y a eu que quelques changements mineurs. Plus important encore, ces caractéristiques TypeScript, comme l'affectation explicite de type, ont été supprimées car il s'agissait d'un code JavaScript non standard. Il ne s'agissait pas d'un code qui s'exécuterait dans le navigateur ou dans tout autre environnement JavaScript. C'est ce fichier JavaScript compilé que vous importerez dans votre fichier HTML. Par exemple, puisque ce fichier contient désormais du code exécutable. D'ailleurs, si vous avez une erreur dans votre code TypeScript. Si vous supprimez ce plus ici, par exemple, vous n'obtiendrez pas seulement un avertissement et une erreur dans votre IDE, ce qui est très pratique, car cela vous permet de détecter l'erreur à temps. Au lieu de cela, si vous enregistrez ce fichier, vous obtiendrez également une erreur si vous essayez de compiler ce fichier TypeScript. Vous obtenez donc également ce message d'erreur. Cependant, comme vous l'obtenez également dans l'éditeur, vous pouvez généralement trouver et corriger ces problèmes sans même commencer le processus de compilation, ce qui est très pratique. Mais c'est ainsi que vous pouvez compiler et exécuter ce code TypeScript dans un environnement qui n'a pas de support TypeScript intégré. Comme mentionné plus loin, je vous montrerai également comment vous pouvez automatiser cette étape de compilation pour des projets plus complexes qui consistent en de multiples fichiers TypeScript, parce que vous ne voulez pas compiler individuellement ces fichiers étape par étape, fichier par fichier manuellement ici. Mais nous y reviendrons plus tard.