1. Premiers pas 🧑‍🎓Installation

Installation

Les sous-titres sont disponibles en français.

Tout d’abord, installons tout ce dont nous avons besoin.

Vous pourriez avoir besoin de droits administrateur. Si vous ĂȘtes sur votre ordinateur de travail et que vous ne les avez pas, demandez l’aide de votre service informatique.

Vous voulez ĂȘtre prĂ©venu quand de nouvelles leçons sont publiĂ©es ? Abonnez-vous Ă  l'infolettre ✉ et donnez une ⭐ au cours sur GitHub pour me garder motivé ! Cliquez ici pour me contacter.

Éditeur de code

Le code n’est que du texte. Vous pouvez Ă©crire votre code dans n’importe quel Ă©diteur de texte, mais il est plus pratique d’utiliser un Ă©diteur de code qui offre de nombreuses fonctionnalitĂ©s utiles.

Vous avez de nombreuses options gratuites et intĂ©ressantes, mais la plus populaire est Visual Studio Code, et c’est ce que nous allons utiliser. C’est un projet en code ouvert maintenu par Microsoft.

Téléchargez-le à partir du site web et installez-le.

Une fois installĂ©, ouvrez-le. Il devrait ressembler Ă  ceci. Ce n’est pas grave si vous avez diffĂ©rents onglets ouverts.

Une capture d'écran de l'éditeur de code Visual Studio Code.

Personnellement, je trouve que l’interface est trop petite et je l’ajuste toujours pour qu’elle soit un peu plus grande lorsque je configure une nouvelle machine. Pour ce faire, cliquez sur le menu View => Appearance => Zoom In.

Une capture d'écran du menu Affichage dans VS Code.

Moteur d’exĂ©cution (runtime)

Pour que votre ordinateur comprenne TypeScript et l’exĂ©cute, vous avez besoin d’un moteur d’exĂ©cution.

Encore une fois, vous avez de nombreuses excellentes options en code ouvert, mais je trouve Deno particuliÚrement facile à utiliser. Deno est maintenu par Deno Land Inc., avec Ryan Dahl comme PDG. Dahl a également créé Node.js, un autre moteur trÚs populaire.

Pour l’installer, visitez le site web et copiez la commande appropriĂ©e pour votre systĂšme d’exploitation.

Ne vous inquiĂ©tez pas si vous avez une version diffĂ©rente. Tant que c’est une v2.x.x, tout ira bien.

Une capture d'écran du site web de Deno.

Ensuite, suivez ces étapes :

  1. Ouvrez un nouveau terminal dans VS Code.
  2. Collez la commande que vous avez copiĂ©e juste avant et appuyez sur la touche EntrĂ©e pour l’exĂ©cuter.

La commande téléchargera et installera Deno sur votre ordinateur.

Une capture d'écran montrant comment installer Deno depuis le terminal de VS Code.

Si on vous demande d’ajouter Deno Ă  votre chemin d’accĂšs (path), tapez Y et appuyez sur EntrĂ©e. Cela garantit que Deno est facilement accessible depuis votre terminal. Si on ne vous le demande pas, ce n’est pas un problĂšme.

Une capture d'écran montrant une option lors de l'installation de Deno.

Et si on vous demande de configurer les suggestions automatiques (completions), choisissez bash ou zsh en fonction de votre systĂšme d’exploitation en utilisant les touches haut et bas et en appuyant sur la barre d’espace. Ensuite, appuyez sur EntrĂ©e. Encore une fois, si on ne vous le demande pas, ce n’est pas un problĂšme.

Une capture d'écran montrant comment configurer les complétions lors de l'installation de Deno.

Maintenant, tout devrait ĂȘtre correctement installĂ©.

Quittez et redémarrez VS Code. Ensuite, tapez deno --version dans votre terminal et appuyez sur Entrée pour afficher votre version de Deno. Vous devriez voir quelque chose comme ceci !

Une capture d'écran montrant comment afficher la version de Deno.

Extensions

VS Code dispose d’un merveilleux Ă©cosystĂšme d’extensions et l’équipe de Deno en a créé une trĂšs utile pour vous aider Ă  coder efficacement.

Suivez ces Ă©tapes pour l’installer :

  1. Cliquez sur l’onglet Extensions sur le cĂŽtĂ© gauche de VS Code.
  2. Recherchez l’extension Deno.
  3. Installez l’extension Deno. Assurez-vous que Mise Ă  jour automatique est cochĂ©e.

Une capture d'écran montrant comment installer l'extension Deno.

Une des fonctionnalitĂ©s trĂšs pratique de l’extension Deno est son formateur de code. Mettons Ă  jour les paramĂštres de VS Code pour qu’il formate automatiquement notre code Ă  chaque sauvegarde de fichier. Cela aidera Ă  garder tout propre et bien organisĂ©.

  • Sur Mac, allez dans Code => Preferences => Settings.
  • Sur PC, allez dans File => Preferences => Settings.

Capture d'écran montrant les paramÚtres de VS Code.

Recherchez Default Formatter dans la barre de recherche et sélectionnez Deno dans le menu déroulant.

Capture d'écran montrant les paramÚtres du formateur de VS Code.

Recherchez Format On Save et cochez la case pour l’activer.

Capture d'écran montrant les paramÚtres du formatage à la sauvegarde de VS Code.

Les paramĂštres sont enregistrĂ©s automatiquement, vous pouvez donc fermer l’onglet Settings. Tout est prĂȘt !

Exécutons un script

Pour vĂ©rifier que tout fonctionne comme prĂ©vu, nous allons Ă©crire un petit script et l’exĂ©cuter.

Pour démarrer un nouveau projet dans VS Code, suivez ces étapes :

  1. Créez un nouveau dossier quelque part sur votre ordinateur.
  2. Dans VS Code, cliquez sur l’onglet Explorer.
  3. Cliquez sur Open Folder et sĂ©lectionnez le dossier que vous venez de crĂ©er. Si on vous demande si vous faites confiance aux auteurs des fichiers, rĂ©pondez “Oui” pour continuer.

Une capture d'écran montrant comment ouvrir un nouveau dossier dans VS Code.

Maintenant que VS Code a ouvert votre dossier, nous pouvons créer un nouveau fichier.

  1. Faites un clic droit sur l’Explorateur.
  2. Cliquez sur New File....
  3. Nommez votre nouveau fichier main.ts. Si le fichier ne s’ouvre pas en tant que nouvel onglet, cliquez dessus.
  4. Dans l’onglet main.ts, tapez console.log("This is going to be fun!"); et enregistrez le fichier en appuyant sur CMD + S sur Mac ou CTRL + S sur PC.

Ce code dit à votre ordinateur d’afficher This is going to be fun! dans votre terminal.

Une capture d'écran montrant comment créer un nouveau fichier TypeScript dans VS Code.

Si vous voyez un point blanc au lieu d’une croix sur l’étiquette de l’onglet (comme montrĂ© dans la capture d’écran ci-dessous), cela signifie que vous avez modifiĂ© le fichier mais ne l’avez pas encore enregistrĂ©. Assurez-vous d’enregistrer le fichier en cliquant sur son contenu puis en appuyant sur CMD + S sur Mac ou CTRL + S sur PC.

Capture d'écran montrant un fichier non enregistré dans VS Code.

Une fois le fichier enregistré, nous pouvons exécuter le script.

  1. Affichez le terminal.
  2. Tapez deno run main.ts dans le terminal et appuyez sur Entrée.

Cela demande Ă  votre ordinateur d’utiliser Deno pour exĂ©cuter le script main.ts. Par consĂ©quent, vous devriez voir Ça va ĂȘtre amusant ! dans votre terminal.

FĂ©licitations ! Vous ĂȘtes maintenant prĂȘt Ă  coder. On va bien s’amuser ! đŸ€©

Une capture d'écran montrant comment exécuter un fichier TypeScript dans VS Code.

À propos de l’IA

Vous avez peut-ĂȘtre remarquĂ© que nous n’avons pas installĂ© d’outils basĂ©s sur l’intelligence artificielle, comme GitHub Copilot.

Ces outils sont de plus en plus populaires pour les tùches de programmation et peuvent améliorer considérablement la productivité. Cependant, ils ne sont pas sans défauts. Ils peuvent introduire des erreurs et des bogues.

Pour les programmeurs expĂ©rimentĂ©s, ce n’est pas un gros problĂšme. Quand vous savez ce que vous faites, vous pouvez facilement vĂ©rifier et ajuster ce que l’IA vous donne.

Pour les dĂ©butants, cependant, il est prĂ©fĂ©rable de s’en passer. Prenez le temps de maĂźtriser les bases. Avec des fondations solides, vous pourrez alors exploiter pleinement le potentiel de ces outils.

Vous avez aimé ? Vous voulez ĂȘtre prĂ©venu quand de nouvelles leçons sont publiĂ©es ? Abonnez-vous Ă  l'infolettre ✉ et donnez une ⭐ au cours sur GitHub pour me garder motivé ! Contactez-moi si vous avez des questions.