Compiler le code TypeScript (Node.js)

Utilisez le package npm TypeScript pour ajouter la prise en charge de TypeScript aux projets basés sur le JavaScript Project System (JSPS), ou .esproj. À compter de Visual Studio 2019, nous vous recommandons d’utiliser le package npm au lieu du Kit de développement logiciel (SDK) TypeScript. Le package npm TypeScript offre une plus grande portabilité sur différentes plateformes et environnements.

Important

Pour ASP.NET projets Principaux, utilisez le package NuGet au lieu de npm pour ajouter la prise en charge de TypeScript.

Ajouter la prise en charge de TypeScript à l’aide de npm

Le package npm TypeScript ajoute la prise en charge de TypeScript. Lorsque le package npm pour TypeScript 2.1 ou version ultérieure est installé dans votre projet, la version correspondante du service de langage TypeScript est chargée dans l’éditeur.

1. Vérifiez si vous devez installer une charge de travail de développement pour Visual Studio ou le runtime Node.js.

   Pour les projets créés à l’aide du système de projet JavaScript (JSPS) ou .esproj, aucune charge de travail supplémentaire n’est nécessaire. Il vous suffit d’installer npm (https://www.npmjs.com/), qui est inclus avec Node.js.

   Pour l’ancien type de projet (.njsproj), vous devez installer la charge de travail de développement Node.js et le runtime Node.js.

2. Si votre projet ne l’inclut pas déjà, installez le package npm typeScript .

   Dans l’Explorateur de solutions (volet droit), ouvrez la package.json dans la racine du projet. Les packages répertoriés correspondent aux packages sous le nœud npm dans l’Explorateur de solutions. Pour plus d’informations, consultez Gérer les packages npm.

   Pour un projet Node.js, vous pouvez installer le package npm TypeScript à l’aide de la ligne de commande ou de l’IDE. Pour installer à l’aide de l’IDE, cliquez avec le bouton droit sur le nœud npm dans l’Explorateur de solutions, choisissez Installer le nouveau package npm, recherchez TypeScriptet installez le package.

   Cochez l’option npm dans la fenêtre Sortie pour afficher la progression de l’installation du package. Le package installé apparaît sous le nœud npm dans l’Explorateur de solutions.

3. Si votre projet ne l’inclut pas déjà, ajoutez un fichier tsconfig.json à la racine de votre projet. Pour ajouter le fichier, cliquez avec le bouton droit sur le nœud du projet et choisissez Ajouter > nouvel élément. Choisissez le Fichier de configuration JSON TypeScript, puis cliquez sur Ajouter.

   Si vous ne voyez pas tous les modèles d’élément, choisissez Afficher tous les modèles, puis choisissez le modèle d’élément.

   Visual Studio ajoute le fichier tsconfig.json à la racine du projet. Vous pouvez utiliser ce fichier pour configurer les options du compilateur TypeScript.

4. Ouvrez tsconfig.json et mettez à jour pour définir les options du compilateur souhaitées.

   Voici un exemple de fichier tsconfig.json simple.

   JSON

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "outDir": "dist"
     },
     "include": [
       "scripts/**/*"
     ]
   }
   

   Dans cet exemple :

   • include indique au compilateur où trouver des fichiers TypeScript (*.ts).
   • option outDir spécifie le dossier de sortie des fichiers JavaScript bruts transpilés par le compilateur TypeScript.
   • L'option sourceMap indique si le compilateur génère des fichiers sourceMap.

   La configuration précédente fournit uniquement une introduction de base à la configuration de TypeScript. Pour plus d’informations sur d’autres options, consultez tsconfig.json.

Générer l’application

1. Ajoutez des fichiers TypeScript (.ts) ou TypeScript JSX (.tsx) à votre projet, puis ajoutez du code TypeScript. Voici un exemple simple de TypeScript :

   TypeScript

   let message: string = 'Hello World';
   console.log(message);
   

2. Dans package.json, ajoutez la prise en charge des commandes de génération et de nettoyage de Visual Studio à l’aide des scripts suivants.

   JSON

   "scripts": {
     "build": "tsc --build",
     "clean": "tsc --build --clean"
   },
   

   Pour créer à l’aide d’un outil tiers comme webpack, vous pouvez ajouter un script de build de ligne de commande à votre fichier package.json :

   JSON

   "scripts": {
      "build": "webpack-cli app.tsx --config webpack-config.js"
   }
   

3. Si vous devez configurer des options telles que la page de démarrage, le chemin d’accès au runtime Node.js, au port d’application ou aux arguments d’exécution, cliquez avec le bouton droit sur le nœud du projet dans l’Explorateur de solutions, puis choisissez Propriétés.

   Notes

   Lors de la configuration d’outils tiers, Node.js projets n’utilisent pas les chemins d’accès configurés sous Outils>Options>Projets et solutions>Gestion des packages web>outils web externes. Ces paramètres sont utilisés pour d’autres types de projets.

4. Choisissez > Générer la solution.

   L’application est générée automatiquement lorsque vous l’exécutez. Toutefois, les éléments suivants peuvent se produire pendant le processus de construction :

   Si vous avez généré des mappages de source, ouvrez le dossier spécifié dans l’option outDir et vous recherchez le ou les fichiers *.js générés, ainsi que le ou les fichiers *js.map générés.

   Les fichiers de mappage de source sont requis pour le débogage.

Exécuter l’application

Pour obtenir des instructions sur l’exécution de l’application après sa compilation, consultez Créer un Node.js et une application Express.

Automatiser les tâches de génération

Vous pouvez utiliser l’Explorateur Task Runner dans Visual Studio pour automatiser les tâches pour des outils tiers tels que npm et webpack.

• NPM Task Runner : ajoute la prise en charge des scripts npm définis dans package.json. Prend en charge yarn.
• Exécuteur de tâches Webpack : ajoute la prise en charge de webpack.

Contenu connexe

Propriétés, React, Angular, Vue