Compilez du code TypeScript (Node.js)

  • Article

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, il est recommandé d’utiliser le package npm au lieu du TypeScript SDK. Le package npm TypeScript offre une meilleure portabilité entre différentes plateformes et différents environnements.

Important

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

Ajoutez 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 un projet, la version correspondante du service de langage TypeScript est chargée dans l’éditeur.

  1. Suivez les instructions pour installer la charge de travail de développement Node.js et le runtime Node.js.

    Pour une intégration Visual Studio simple, créez votre projet à l’aide de l’un des modèles TypeScript Node.js, tels que le modèle Application web vide Node.js. Sinon, utilisez un modèle JavaScript Node.js inclus dans Visual Studio et suivez les instructions ici. Vous pouvez également utiliser un projet Ouvrir un dossier.

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

    À partir de l’Explorateur de solutions (volet droit), ouvrez le 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, faites un clic droit sur le nœud npm dans l’Explorateur de solutions, choisissez Installer le nouveau package npm, recherchez TypeScript, puis installez le package.

    Cochez l’option npm dans la fenêtre Sortie pour voir la progression de l’installation du package. Le package installé s’affiche 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, faites un clic droit sur le nœud du projet, puis 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 le fichier pour définir les options de compilateur souhaitées.

    Vous trouverez ci-dessous un exemple de fichier tsconfig.json simple.

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

    Dans cet exemple :

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

    La configuration précédente ne fournit qu’une introduction de base à la configuration de TypeScript. Pour obtenir des informations sur d'autres options, consultez tsconfig.json.

Créer l’application

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

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

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

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

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

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

    Pour obtenir un exemple d’utilisation de webpack avec React et un fichier de configuration webpack, consultez Créer une application web avec Node.js et React.

    Pour obtenir un exemple d’utilisation de Vue.js avec TypeScript, consultez Créer une application Vue.js.

  3. Si vous devez configurer des options telles que la page de démarrage, le chemin d’accès au runtime Node.js, le port d’application ou les arguments d’exécution, faites un clic 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 > 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 build :

    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écution de l'application

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

Automatisez les tâches de build

Vous pouvez utiliser l’Explorateur d’exécuteurs de tâches dans Visual Studio pour automatiser des tâches pour des outils tiers tels que npm et webpack.

Contenu connexe

Propriétés, React, Angular et Vue