{"id":76566,"date":"2024-03-18T10:25:29","date_gmt":"2024-03-18T09:25:29","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=76566&#038;preview=true&#038;preview_id=76566"},"modified":"2024-03-27T09:53:28","modified_gmt":"2024-03-27T08:53:28","slug":"typescript-visual-studio","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/","title":{"rendered":"Ma\u00eetriser le d\u00e9veloppement TypeScript dans Visual Studio Code"},"content":{"rendered":"<p>Visual Studio Code est un environnement de d\u00e9veloppement int\u00e9gr\u00e9 (IDE) appr\u00e9ci\u00e9 par de nombreux programmeurs qui appr\u00e9cient son large \u00e9ventail de fonctionnalit\u00e9s et son h\u00e9ritage open source. Visual Studio Code rend le codage plus facile, plus rapide et moins frustrant. C&rsquo;est particuli\u00e8rement vrai lorsqu&rsquo;il s&rsquo;agit de <a href=\"https:\/\/kinsta.com\/fr\/blog\/guide-complet-typescript\/\">TypeScript<\/a>, l&rsquo;un des nombreux langages pris en charge par l&rsquo;IDE.<\/p>\n<p>Des fonctionnalit\u00e9s telles que la compl\u00e9tion de code, les indications de param\u00e8tres et la coloration syntaxique contribuent largement \u00e0 rendre les d\u00e9veloppeurs TypeScript plus productifs dans Visual Studio Code. Visual Studio Code est \u00e9galement dot\u00e9 d&rsquo;un d\u00e9bogueur <a href=\"https:\/\/kinsta.com\/fr\/sujets\/node-js\/\">Node.js<\/a> int\u00e9gr\u00e9 et de la possibilit\u00e9 de convertir le code en <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> ex\u00e9cutable \u00e0 partir de l&rsquo;\u00e9diteur. Cependant, la plupart de ces fonctionnalit\u00e9s doivent \u00eatre configur\u00e9es pour une utilisation optimale.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Comment configurer Visual Studio Code pour le d\u00e9veloppement TypeScript ?<\/h2>\n<p>Ce tutoriel \u00e9tape par \u00e9tape montre comment configurer Visual Studio Code pour le d\u00e9veloppement TypeScript. Nous initialisons un projet Node.js en TypeScript, \u00e9crivons du code, puis compilons, ex\u00e9cutons et d\u00e9boguons le TypeScript &#8211; le tout dans Visual Studio Code.<\/p>\n<h3>Pr\u00e9-requis<\/h3>\n<p>Avant de commencer, assurez-vous d&rsquo;avoir<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a> install\u00e9 et configur\u00e9 localement<\/li>\n<li><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a> t\u00e9l\u00e9charg\u00e9 et install\u00e9<\/li>\n<\/ul>\n<p>Vous avez besoin de Node.js et de <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-npm\/\">npm<\/a> (le gestionnaire de paquets Node) pour construire votre projet TypeScript. Vous pouvez v\u00e9rifier que <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-installer-node-js\/\">Node.js est install\u00e9<\/a> sur votre machine \u00e0 l&rsquo;aide de la commande de terminal suivante :<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Vous devriez obtenir la version de Node.js sur votre machine comme suit :<\/p>\n<pre><code class=\"language-bash\">v21.6.1<\/code><\/pre>\n<p>Commen\u00e7ons maintenant \u00e0 utiliser TypeScript dans Visual Studio Code !<\/p>\n<h3>Installer le compilateur TypeScript<\/h3>\n<p>Visual Studio Code prend en charge le d\u00e9veloppement TypeScript mais n&rsquo;inclut pas le compilateur TypeScript. Comme le <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/compiler-options.html\" target=\"_blank\" rel=\"noopener noreferrer\">compilateur TypeScript<\/a> tsc transforme &#8211; ou transpose &#8211; le code TypeScript en JavaScript, il est indispensable pour tester votre code TypeScript. En d&rsquo;autres termes, tsc prend du code TypeScript en entr\u00e9e et produit du code JavaScript en sortie, puis vous pouvez ex\u00e9cuter le code JavaScript avec Node.js ou dans un navigateur Web.<\/p>\n<p>Lancez la commande ci-dessous dans votre terminal pour installer globalement le compilateur TypeScript sur votre ordinateur :<\/p>\n<pre><code class=\"language-bash\">npm install -g typescript<\/code><\/pre>\n<p>V\u00e9rifiez la version install\u00e9e de tsc :<\/p>\n<pre><code class=\"language-bash\">tsc --version<\/code><\/pre>\n<p>Si cette commande ne renvoie pas d&rsquo;erreur, tsc est disponible. Vous avez maintenant tout ce qu&rsquo;il faut pour construire un projet TypeScript !<\/p>\n<h2>Cr\u00e9er un projet TypeScript<\/h2>\n<p>Cr\u00e9ons un projet TypeScript Node.js simple appel\u00e9 <strong>hello-world<\/strong>. Ouvrez votre terminal et cr\u00e9ez un dossier pour votre projet :<\/p>\n<pre><code class=\"language-bash\">mkdir hello-world\ncd hello-world<\/code><\/pre>\n<p>Dans <strong>hello-world<\/strong>, initialisez un projet avec la commande npm suivante :<\/p>\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<p>Cela cr\u00e9e un fichier de configuration <strong>package.json<\/strong> pour votre projet Node.js. Il est temps de voir en quoi consiste le projet dans Visual Studio Code !<\/p>\n<p>Lancez Visual Studio Code et s\u00e9lectionnez <strong>File<\/strong> &gt; <strong>Open Folder<\/strong>&#8230;<\/p>\n<p>Dans la fen\u00eatre qui s&rsquo;affiche, s\u00e9lectionnez le dossier du projet <strong>hello-world<\/strong> et cliquez sur <strong>Open<\/strong>. Votre projet devrait ressembler \u00e0 ceci :<\/p>\n<figure style=\"width: 1919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/open-typescript-project-visual-studio-code.png\" alt=\"Le projet Node.js TypeScript ouvert dans Visual Studio Code.\" width=\"1919\" height=\"1035\"><figcaption class=\"wp-caption-text\">Le projet Node.js TypeScript ouvert dans Visual Studio Code.<\/figcaption><\/figure>\n<p>Actuellement, le projet se compose uniquement du fichier <strong>package.json<\/strong> initialis\u00e9 par <code>npm init<\/code>.<\/p>\n<p>S\u00e9lectionnez <strong>View<\/strong> &gt; <strong>Terminal<\/strong> dans le menu Visual Studio Code pour acc\u00e9der au <a href=\"https:\/\/code.visualstudio.com\/docs\/terminal\/basics\" target=\"_blank\" rel=\"noopener noreferrer\">terminal int\u00e9gr\u00e9<\/a> de l&rsquo;\u00e9diteur. Ex\u00e9cutez la commande suivante :<\/p>\n<pre><code class=\"language-bash\">npx tsc --init<\/code><\/pre>\n<p>Cette commande initialise un fichier de configuration TypeScript nomm\u00e9 <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/tsconfig-json.html\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>tsconfig.json<\/strong><\/a> dans le r\u00e9pertoire du projet.<\/p>\n<p>Le fichier <strong>tsconfig.json<\/strong> vous permet de personnaliser le comportement du compilateur TypeScript. Plus pr\u00e9cis\u00e9ment, il fournit au compilateur TypeScript des instructions pour la transposition du code TypeScript. Sans ce fichier, tsc ne sera pas en mesure de compiler votre projet TypeScript comme vous le souhaitez.<\/p>\n<p>Ouvrez le <strong>fichier tsconfig.json<\/strong> dans Visual Studio Code, et vous remarquerez qu&rsquo;il contient un commentaire pour chaque option de configuration disponible. Nous voulons que notre fichier <strong>tsconfig.json<\/strong> inclue ces options :<\/p>\n<pre><code class=\"language-json\">{\n  \"compilerOptions\": {\n    \"target\": \"es2016\",\n    \"module\": \"commonjs\",\n    \"esModuleInterop\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"strict\": true,\n    \"skipLibCheck\": true,\n    \"sourceMap\": true,\n    \"outDir\": \".\/build\"\n  }\n}<\/code><\/pre>\n<p>Il est probable que les seules diff\u00e9rences que vous verrez entre les options ci-dessus soient l&rsquo;activation du mappage des sources pour le JavaScript que vous allez g\u00e9n\u00e9rer et l&rsquo;ajout d&rsquo;un r\u00e9pertoire de sortie :<\/p>\n<pre><code class=\"language-json\">    \"sourceMap\": true,\n    \"outDir\": \".\/build\"<\/code><\/pre>\n<p>Apportez ces modifications \u00e0 votre fichier <strong>tsconfig.json.<\/strong><\/p>\n<p>Le <a href=\"https:\/\/www.typescriptlang.org\/tsconfig#sourceMap\">mappage des sources<\/a> est requis par le compilateur Visual Studio Code.<\/p>\n<p>Le fichier <a href=\"https:\/\/www.typescriptlang.org\/tsconfig#outDir\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>outDir<\/strong><\/a> d\u00e9finit l&rsquo;endroit o\u00f9 le compilateur place les fichiers transpos\u00e9s. Par d\u00e9faut, il s&rsquo;agit du dossier racine du projet. Pour \u00e9viter de remplir le dossier du projet avec des fichiers de compilation \u00e0 chaque compilation, choisissez un autre dossier, par exemple <strong>build<\/strong>.<\/p>\n<p>Votre projet TypeScript est presque pr\u00eat \u00e0 \u00eatre compil\u00e9. Mais d&rsquo;abord, vous avez besoin de code TypeScript.<\/p>\n<p>Cliquez avec le bouton droit de la souris sur la section <strong>Explorer<\/strong> et s\u00e9lectionnez <strong>Nouveau fichier&#8230;<\/strong> Tapez <code>index.ts<\/code> et appuyez sur <strong>Entr\u00e9e<\/strong>. Votre projet contient d\u00e9sormais un fichier TypeScript appel\u00e9 <strong>index.ts<\/strong>:<\/p>\n<figure style=\"width: 1919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/typescript-file-visual-studio-code.png\" alt=\"Le fichier index.ts vierge dans Visual Studio Code.\" width=\"1919\" height=\"1035\"><figcaption class=\"wp-caption-text\">Le fichier <strong>index.ts<\/strong> vierge dans Visual Studio Code.<\/figcaption><\/figure>\n<p>Commen\u00e7ons par le code TypeScript suivant :<\/p>\n<pre><code class=\"language-typescript\">const message: string = \"Hello, World!\"\nconsole.log(message)\n<\/code><\/pre>\n<p>Cet extrait imprime simplement le message bien connu <em>Hello, World !<\/em><\/p>\n<h2>Essayer IntelliSense pour compl\u00e9ter le code<\/h2>\n<p>Lorsque vous avez \u00e9crit les lignes ci-dessus dans Visual Studio Code, vous avez peut-\u00eatre remarqu\u00e9 quelques suggestions de code faites par l&rsquo;\u00e9diteur. Cela est d\u00fb \u00e0 <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/intellisense\" target=\"_blank\" rel=\"noopener noreferrer\">IntelliSense<\/a>, l&rsquo;une des fonctions les plus int\u00e9ressantes de Visual Studio Code.<\/p>\n<p>IntelliSense comprend des fonctionnalit\u00e9s telles que la compl\u00e9tion de code, des informations sur la documentation et des informations sur les param\u00e8tres des fonctions. IntelliSense sugg\u00e8re automatiquement comment compl\u00e9ter le code au fur et \u00e0 mesure que vous le tapez, ce qui peut am\u00e9liorer consid\u00e9rablement votre productivit\u00e9 et votre pr\u00e9cision. Vous pouvez le voir en action ici :<\/p>\n<figure style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/intellisense-visual-studio-code.gif\" alt=\"La reconnaissance de code IntelliSense de Visual Studio Code en action.\" width=\"800\" height=\"503\"><figcaption class=\"wp-caption-text\">La reconnaissance de code IntelliSense de Visual Studio Code en action.<\/figcaption><\/figure>\n<p>N&rsquo;oubliez pas que Visual Studio Code est livr\u00e9 avec la prise en charge IntelliSense pour les projets TypeScript. Vous n&rsquo;avez pas besoin de le configurer manuellement.<\/p>\n<p>Maintenant que vous savez comment \u00e9crire TypeScript comme un pro dans Visual Studio Code, compilons-le et voyons s&rsquo;il fonctionne.<\/p>\n<h2>Compiler TypeScript dans Visual Studio Code<\/h2>\n<p>Ouvrez le terminal int\u00e9gr\u00e9 dans Visual Studio Code et ex\u00e9cutez :<\/p>\n<pre><code class=\"language-bash\">tsc -p .<\/code><\/pre>\n<p>Cela transpose tous les fichiers TypeScript du projet en JavaScript. L&rsquo;adresse <code>-p .<\/code> indique au compilateur d&rsquo;utiliser le fichier <strong>tsconfig.json<\/strong> situ\u00e9 dans le r\u00e9pertoire courant. Le r\u00e9sultat &#8211; dans ce cas, <strong>index.js<\/strong> et la carte source <strong>index.js.map<\/strong> &#8211; est plac\u00e9 dans le r\u00e9pertoire <strong>.\/build<\/strong>.<\/p>\n<p>Vous pouvez confirmer que le code JavaScript transpil\u00e9 fonctionne avec cette commande dans le terminal :<\/p>\n<pre><code class=\"language-bash\">node .\/build\/index.js<\/code><\/pre>\n<p>Node.js interpr\u00e9tera <strong>index.js<\/strong> et l&rsquo;imprimera dans le terminal :<\/p>\n<pre><code class=\"language-bash\">Hello, World!<\/code><\/pre>\n<p>Une autre m\u00e9thode pour lancer le transpileur consiste \u00e0 s\u00e9lectionner <strong>Terminal<\/strong> &gt; <strong>Run Build Task<\/strong>&#8230; dans le menu Visual Studio Code et \u00e0 cliquer sur l&rsquo;option <strong>tsc : build &#8211; tsconfig.json<\/strong>.<\/p>\n<figure style=\"width: 909px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/transpiling-visual-studio-code.png\" alt=\"Lancez le processus de construction \u00e0 l'aide des menus de Visual Studio Code.\" width=\"909\" height=\"136\"><figcaption class=\"wp-caption-text\">Lancez le processus de construction \u00e0 l&rsquo;aide des menus de Visual Studio Code.<\/figcaption><\/figure>\n<p>Cette op\u00e9ration ex\u00e9cute <code>tsc -p .<\/code> dans les coulisses et construit votre code directement dans l&rsquo;\u00e9diteur.<\/p>\n<p>Voil\u00e0 comment compiler votre projet TypeScript dans Visual Studio Code. Il ne vous reste plus qu&rsquo;\u00e0 trouver comment lancer et d\u00e9boguer votre code.<\/p>\n<h2>Ex\u00e9cuter et d\u00e9boguer TypeScript dans Visual Studio Code<\/h2>\n<p>Visual Studio Code prend en charge le d\u00e9bogage TypeScript gr\u00e2ce \u00e0 son <a href=\"https:\/\/code.visualstudio.com\/docs\/nodejs\/nodejs-debugging\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9bogueur Node.js<\/a> int\u00e9gr\u00e9. Mais avant de pouvoir l&rsquo;utiliser, vous devez le configurer. Cliquez sur l&rsquo;ic\u00f4ne <strong>Ex\u00e9cuter et d\u00e9boguer<\/strong> dans la barre lat\u00e9rale, cliquez sur <strong>Cr\u00e9er un fichier launch.json<\/strong> et s\u00e9lectionnez <strong>Node.js<\/strong>.<\/p>\n<figure style=\"width: 1367px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/node-debugger-visual-studio-code.png\" alt=\"S\u00e9lection du d\u00e9bogueur Node.js pour la configuration du fichier launch.json.\" width=\"1367\" height=\"471\"><figcaption class=\"wp-caption-text\">S\u00e9lection du d\u00e9bogueur Node.js pour la configuration du <strong>fichier launch.json<\/strong>.<\/figcaption><\/figure>\n<p>Cela cr\u00e9e un fichier <strong>launch.j<\/strong> son Node.js par d\u00e9faut, qui est le fichier de configuration que le d\u00e9bogueur Visual Studio Code utilise pour lancer et d\u00e9boguer une application. Ce fichier de configuration indique comment lancer l&rsquo;application, les arguments de ligne de commande \u00e0 utiliser et les variables d&rsquo;environnement \u00e0 d\u00e9finir.<\/p>\n<p>Comme vous pouvez le voir dans la section <strong>Explorer<\/strong>, <strong>launch.json est situ\u00e9 dans le dossier <strong>.vscode<\/strong> d&rsquo;un projet<\/strong>.<\/p>\n<p>Ouvrez ce fichier et modifiez-le comme suit :<\/p>\n<pre><code class=\"language-json\">{\n    \/\/ Use IntelliSense to learn about possible attributes.\n    \/\/ Hover to view descriptions of existing attributes.\n    \/\/ For more information, visit: https:\/\/go.microsoft.com\/fwlink\/?linkid=830387\n    \"version\": \"0.2.0\",\n    \"configurations\": [\n        {\n            \"type\": \"node\",\n            \"request\": \"launch\",\n            \"name\": \"Launch Program\",\n            \"skipFiles\": [\n                \"node_modules\/**\"\n            ],\n            \"program\": \"${workspaceFolder}\/index.ts\",\n            \"preLaunchTask\": \"tsc: build - tsconfig.json\",\n            \"outFiles\": [\"${workspaceFolder}\/build\/**\/*.js\"]\n        }\n    ]\n}<\/code><\/pre>\n<p>Ajustez les options <code>program<\/code>, <code>preLaunchTask<\/code>, et <code>outFiles<\/code>, en tenant compte du fait que :<\/p>\n<ul>\n<li><code>program<\/code> : Sp\u00e9cifie le chemin vers le point d&rsquo;entr\u00e9e de l&rsquo;application \u00e0 d\u00e9boguer. En TypeScript, il doit contenir le fichier principal \u00e0 ex\u00e9cuter lors du lancement de l&rsquo;application.<\/li>\n<li><code>preLaunchTask<\/code> : D\u00e9finit le nom de la t\u00e2che de construction de Visual Studio Code \u00e0 ex\u00e9cuter avant de lancer l&rsquo;application. Dans un projet TypeScript, il doit s&rsquo;agir de la t\u00e2che de construction.<\/li>\n<li><code>outFiles<\/code> : Contient le chemin d&rsquo;acc\u00e8s aux fichiers JavaScript transpil\u00e9s g\u00e9n\u00e9r\u00e9s par le processus de construction. Les fichiers sources g\u00e9n\u00e9r\u00e9s par tsc gr\u00e2ce \u00e0 la configuration de <code>\"sourceMap\": true<\/code> sont utilis\u00e9s par le d\u00e9bogueur pour faire correspondre le code source TypeScript au code JavaScript g\u00e9n\u00e9r\u00e9. Cela vous permet de d\u00e9boguer directement le code TypeScript.<\/li>\n<\/ul>\n<p>Sauvegardez le fichier <strong>launch.json<\/strong> et ouvrez <strong>index.ts.<\/strong> Cliquez sur l&rsquo;espace vide avant la ligne <code>console.log()<\/code> pour d\u00e9finir un point de terminaison. Un point rouge apparait \u00e0 c\u00f4t\u00e9 de la ligne, comme suit :<\/p>\n<figure style=\"width: 1366px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/debug-breakpoint-visual-studio-code.png\" alt=\"Le point rouge marque un point de terminaison de d\u00e9bogage.\" width=\"1366\" height=\"261\"><figcaption class=\"wp-caption-text\">Le point rouge marque un point de terminaison de d\u00e9bogage.<\/figcaption><\/figure>\n<p>Lorsque vous ex\u00e9cutez le code avec le compilateur, l&rsquo;ex\u00e9cution s&rsquo;arr\u00eate \u00e0 cet endroit. Gr\u00e2ce \u00e0 ce point d&rsquo;arr\u00eat, vous pouvez v\u00e9rifier que le d\u00e9bogueur Node.js dans Visual Studio Code fonctionne comme pr\u00e9vu.<\/p>\n<p>Visitez \u00e0 nouveau la section <strong>Run and Debug<\/strong> et cliquez sur le bouton vert play pour lancer le d\u00e9bogueur. Attendez que <code>preLaunchTask<\/code> s&rsquo;ex\u00e9cute. Une fois le code compil\u00e9, le programme se lance et l&rsquo;ex\u00e9cution s&rsquo;arr\u00eate au point de terminaison d\u00e9fini ci-dessus.<\/p>\n<figure style=\"width: 1919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/debug-running-visual-studio-code.png\" alt=\"Le d\u00e9bogueur de Visual Studio Code en action.\" width=\"1919\" height=\"1035\"><figcaption class=\"wp-caption-text\">Le d\u00e9bogueur de Visual Studio Code en action.<\/figcaption><\/figure>\n<p>Sur la gauche de l&rsquo;image ci-dessus, vous pouvez voir les valeurs des variables au moment de l&rsquo;interruption. Vous pouvez \u00e9galement faire une pause, passer par-dessus, entrer\/sortir, red\u00e9marrer et arr\u00eater, comme d\u00e9crit dans la <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/debugging\" target=\"_blank\" rel=\"noopener noreferrer\">documentation sur le d\u00e9bogage<\/a> de Visual Studio Code.<\/p>\n<p>Appuyez sur <strong>F5<\/strong> pour reprendre l&rsquo;ex\u00e9cution, et vous devriez voir le message suivant dans l&rsquo;onglet <strong>Debug Console<\/strong>:<\/p>\n<pre><code class=\"language-bash\">Hello, World!<\/code><\/pre>\n<p>C&rsquo;est ce que vous attendez de l&rsquo;application et cela signifie que le programme a \u00e9t\u00e9 ex\u00e9cut\u00e9 correctement.<\/p>\n<p>Vous venez d&rsquo;apprendre \u00e0 configurer Visual Studio Code pour la programmation TypeScript. Le tutoriel pourrait s&rsquo;arr\u00eater l\u00e0, mais il reste encore une chose importante \u00e0 apprendre : comment configurer une extension dans Visual Studio Code qui peut rendre l&rsquo;\u00e9criture d&rsquo;un code de qualit\u00e9 en TypeScript encore plus facile.<\/p>\n<h2>Comment configurer ESLint dans Visual Studio Code<\/h2>\n<p>Vous pouvez \u00e9tendre le c\u0153ur de Visual Studio Code \u00e0 l&rsquo;aide d&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/vscode-extensions\/\">extensions<\/a>. Celles-ci fournissent des caract\u00e9ristiques et des fonctionnalit\u00e9s suppl\u00e9mentaires pour l&rsquo;\u00e9diteur de code.<\/p>\n<p>L&rsquo;une des extensions Visual Studio Code les plus populaires pour le d\u00e9veloppement TypeScript est l&rsquo;<a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dbaeumer.vscode-eslint\" target=\"_blank\" rel=\"noopener noreferrer\">extension ESLint<\/a>.<\/p>\n<p><a href=\"https:\/\/eslint.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESLint<\/a> est un outil populaire d&rsquo;analyse statique du code pour JavaScript et TypeScript qui aide les d\u00e9veloppeurs \u00e0 identifier et \u00e0 corriger les erreurs de codage courantes et \u00e0 appliquer les normes de codage. L&rsquo;extension ex\u00e9cute ESLint directement dans l&rsquo;\u00e9diteur.<\/p>\n<p>Int\u00e9grons ESLint dans Visual Studio Code dans votre projet TypeScript.<\/p>\n<p>Tout d&rsquo;abord, initialisez ESLint dans votre projet \u00e0 l&rsquo;aide de cette commande de terminal :<\/p>\n<pre><code class=\"language-bash\">npm init @eslint\/config<\/code><\/pre>\n<p>Au cours du processus de configuration, certaines questions vous seront pos\u00e9es pour vous aider \u00e0 g\u00e9n\u00e9rer le fichier de configuration d&rsquo;ESLint. Vous pouvez r\u00e9pondre comme suit :<\/p>\n<pre><code class=\"language-bash\">\u221a How would you like to use ESLint? \u00b7 style\n\u221a What type of modules does your project use? \u00b7 commonjs\n\u221a Which framework does your project use? \u00b7 none\n\u221a Does your project use TypeScript? \u00b7 Yes\n\u221a Where does your code run? \u00b7 browser\n\u221a How would you like to define a style for your project? \u00b7 guide\n\u221a Which style guide do you want to follow? \u00b7 standard-with-typescript\n\u221a What format do you want your config file to be in? \u00b7 JSON<\/code><\/pre>\n<p>Le programme d&rsquo;installation v\u00e9rifiera les d\u00e9pendances et vous demandera si vous souhaitez installer les paquets manquants. Vous pouvez r\u00e9pondre comme suit :<\/p>\n<pre><code class=\"language-bash\">\u221a Would you like to install them now? \u00b7 Yes\n\u221a Which package manager do you want to use? \u00b7 npm<\/code><\/pre>\n<p>\u00c0 la fin du processus, vous trouverez un nouveau fichier <strong>.eslintrc.json<\/strong> contenant le code initial suivant :<\/p>\n<pre><code class=\"language-json\">{\n    \"env\": {\n        \"browser\": true,\n        \"commonjs\": true,\n        \"es2021\": true\n    },\n    \"extends\": \"standard-with-typescript\",\n    \"overrides\": [\n    ],\n    \"parserOptions\": {\n        \"ecmaVersion\": \"latest\"\n    },\n    \"rules\": {\n    }\n}<\/code><\/pre>\n<p>Le fichier <strong>.eslintrc.json<\/strong> contient les param\u00e8tres utilis\u00e9s par ESLint pour appliquer des normes sp\u00e9cifiques de code, de style et de qualit\u00e9. Voici \u00e0 quoi peut ressembler un <strong> fichier .eslintrc.json<\/strong> de base pour un projet Node.js TypeScript :<\/p>\n<pre><code class=\"language-json\">{\n    \"env\": {\n        \"browser\": true,\n        \"commonjs\": true,\n        \"es2021\": true,\n        \/\/ enable node support\n        \"node\": true\n    },\n    \"extends\": \"standard-with-typescript\",\n    \"overrides\": [\n    ],\n    \"parserOptions\": {\n        \"ecmaVersion\": \"latest\",\n        \"project\": \"tsconfig.json\"\n    },\n    \"rules\": {\n        \/\/ force the code to be indented with 2 spaces\n        \"indent\": [\"error\", 2],\n        \/\/ mark extra spaces as errors\n        \"no-multi-spaces\": [\"error\"]\n    }\n}<\/code><\/pre>\n<p>Il est maintenant temps d&rsquo;installer l&rsquo;extension ESLint dans Visual Studio Code. Cliquez sur l&rsquo;ic\u00f4ne <strong>Extensions<\/strong> dans le menu de gauche et saisissez <code>ESLint<\/code>. Trouvez l&rsquo;extension ESLint et cliquez sur <strong>Installer<\/strong>.<\/p>\n<figure style=\"width: 1642px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/eslint-installation-visual-studio-code.png\" alt=\"Installation de l'extension ESLint dans Visual Studio Code.\" width=\"1642\" height=\"724\"><figcaption class=\"wp-caption-text\">Installation de l&rsquo;extension ESLint dans Visual Studio Code.<\/figcaption><\/figure>\n<p>Pour permettre \u00e0 l&rsquo;extension ESLint d&rsquo;inspecter automatiquement vos fichiers TypeScript \u00e0 chaque enregistrement, cr\u00e9ez un fichier <strong>settings.json<\/strong> dans <strong>.vscode<\/strong> avec le contenu suivant :<\/p>\n<pre><code class=\"language-json\">{\n    \"editor.codeActionsOnSave\": {\n        \"source.fixAll.eslint\": true\n      },\n      \"eslint.validate\": [\n        \"typescript\"\n      ],\n      \"eslint.codeActionsOnSave.rules\": null\n}<\/code><\/pre>\n<p>Le fichier <strong>settings.json<\/strong> contient la configuration utilis\u00e9e par Visual Studio Code pour personnaliser le comportement de l&rsquo;\u00e9diteur et de ses extensions.<\/p>\n<p>Red\u00e9marrez Visual Studio Code pour que l&rsquo;\u00e9diteur charge les nouvelles extensions et configurations.<\/p>\n<p>Si vous ouvrez <strong>index.ts<\/strong> et \u00e9ditez le code, vous verrez de nouvelles erreurs rapport\u00e9es par l&rsquo;IDE. Pour les erreurs de style de code, enregistrez le fichier, et ESLint reformatera automatiquement le code comme d\u00e9fini dans <strong>.eslintrc.json<\/strong>.<\/p>\n<figure style=\"width: 600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/eslint-running-visual-studio-code.gif\" alt=\"ESLint en action dans Visual Studio Code.\" width=\"600\" height=\"301\"><figcaption class=\"wp-caption-text\">ESLint en action dans Visual Studio Code.<\/figcaption><\/figure>\n<p>Maintenant, plus rien ne peut vous emp\u00eacher d&rsquo;\u00e9crire du code de qualit\u00e9 ! Il ne vous reste plus qu&rsquo;\u00e0 d\u00e9ployer votre application Node.js dans un service d&rsquo;h\u00e9bergement cloud moderne comme celui de Kinsta.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>La configuration de Visual Studio Code pour le d\u00e9veloppement en TypeScript est assez simple &#8211; vous venez d&rsquo;apprendre comment cr\u00e9er un projet Node.js en TypeScript, le charger dans Visual Studio Code, et utiliser l&rsquo;IDE pour \u00e9crire du code avec l&rsquo;aide d&rsquo;IntelliSense. Vous avez \u00e9galement configur\u00e9 le compilateur TypeScript, configur\u00e9 le compilateur Node.js pour d\u00e9boguer le code TypeScript et int\u00e9gr\u00e9 ESLint dans le projet.<\/p>\n<p>Si vous souhaitez faire passer votre d\u00e9veloppement d&rsquo;applications web au niveau sup\u00e9rieur, d\u00e9couvrez les services d&rsquo;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">h\u00e9bergement d&rsquo;applications web<\/a> et d&rsquo;<a href=\"https:\/\/sevalla.com\/database-hosting\/\">h\u00e9bergement de bases de donn\u00e9es infog\u00e9r\u00e9es<\/a> de Kinsta. Kinsta propose une gamme de solutions d&rsquo;h\u00e9bergement optimis\u00e9es pour la vitesse, la s\u00e9curit\u00e9 et l&rsquo;\u00e9volutivit\u00e9, offrant un environnement id\u00e9al pour la cr\u00e9ation et le d\u00e9ploiement d&rsquo;applications de haute performance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visual Studio Code est un environnement de d\u00e9veloppement int\u00e9gr\u00e9 (IDE) appr\u00e9ci\u00e9 par de nombreux programmeurs qui appr\u00e9cient son large \u00e9ventail de fonctionnalit\u00e9s et son h\u00e9ritage open &#8230;<\/p>\n","protected":false},"author":305,"featured_media":76567,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1019,1020],"class_list":["post-76566","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-languages-developpement-web","topic-outils-developpement-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ma\u00eetriser le d\u00e9veloppement TypeScript dans Visual Studio Code - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Voici comment obtenir vos projets TypeScript et les utiliser avec l&#039;environnement de d\u00e9veloppement int\u00e9gr\u00e9 Visual Studio Code de Microsoft.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ma\u00eetriser le d\u00e9veloppement TypeScript dans Visual Studio Code\" \/>\n<meta property=\"og:description\" content=\"Voici comment obtenir vos projets TypeScript et les utiliser avec l&#039;environnement de d\u00e9veloppement int\u00e9gr\u00e9 Visual Studio Code de Microsoft.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-18T09:25:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-27T08:53:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/typescript-visual-studio.png\" \/>\n\t<meta property=\"og:image:width\" content=\"6084\" \/>\n\t<meta property=\"og:image:height\" content=\"3042\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Antonello Zanini\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Voici comment obtenir vos projets TypeScript et les utiliser avec l&#039;environnement de d\u00e9veloppement int\u00e9gr\u00e9 Visual Studio Code de Microsoft.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/typescript-visual-studio.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Antonello Zanini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/\"},\"author\":{\"name\":\"Antonello Zanini\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b\"},\"headline\":\"Ma\u00eetriser le d\u00e9veloppement TypeScript dans Visual Studio Code\",\"datePublished\":\"2024-03-18T09:25:29+00:00\",\"dateModified\":\"2024-03-27T08:53:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/\"},\"wordCount\":2422,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/typescript-visual-studio.png\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/\",\"name\":\"Ma\u00eetriser le d\u00e9veloppement TypeScript dans Visual Studio Code - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/typescript-visual-studio.png\",\"datePublished\":\"2024-03-18T09:25:29+00:00\",\"dateModified\":\"2024-03-27T08:53:28+00:00\",\"description\":\"Voici comment obtenir vos projets TypeScript et les utiliser avec l'environnement de d\u00e9veloppement int\u00e9gr\u00e9 Visual Studio Code de Microsoft.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/typescript-visual-studio.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/typescript-visual-studio.png\",\"width\":6084,\"height\":3042},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Outils de d\u00e9veloppement web\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/outils-developpement-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Ma\u00eetriser le d\u00e9veloppement TypeScript dans Visual Studio Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b\",\"name\":\"Antonello Zanini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ddf1b67f03071c679a5c8ae17ca733ea?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ddf1b67f03071c679a5c8ae17ca733ea?s=96&d=mm&r=g\",\"caption\":\"Antonello Zanini\"},\"description\":\"Antonello is a software engineer, but prefers to call himself a Technology Bishop. Spreading knowledge through writing is his mission.\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/antonellozanini\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ma\u00eetriser le d\u00e9veloppement TypeScript dans Visual Studio Code - Kinsta\u00ae","description":"Voici comment obtenir vos projets TypeScript et les utiliser avec l'environnement de d\u00e9veloppement int\u00e9gr\u00e9 Visual Studio Code de Microsoft.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/","og_locale":"fr_FR","og_type":"article","og_title":"Ma\u00eetriser le d\u00e9veloppement TypeScript dans Visual Studio Code","og_description":"Voici comment obtenir vos projets TypeScript et les utiliser avec l'environnement de d\u00e9veloppement int\u00e9gr\u00e9 Visual Studio Code de Microsoft.","og_url":"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2024-03-18T09:25:29+00:00","article_modified_time":"2024-03-27T08:53:28+00:00","og_image":[{"width":6084,"height":3042,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/typescript-visual-studio.png","type":"image\/png"}],"author":"Antonello Zanini","twitter_card":"summary_large_image","twitter_description":"Voici comment obtenir vos projets TypeScript et les utiliser avec l'environnement de d\u00e9veloppement int\u00e9gr\u00e9 Visual Studio Code de Microsoft.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/typescript-visual-studio.png","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Antonello Zanini","Dur\u00e9e de lecture estim\u00e9e":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/"},"author":{"name":"Antonello Zanini","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b"},"headline":"Ma\u00eetriser le d\u00e9veloppement TypeScript dans Visual Studio Code","datePublished":"2024-03-18T09:25:29+00:00","dateModified":"2024-03-27T08:53:28+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/"},"wordCount":2422,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/typescript-visual-studio.png","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/","url":"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/","name":"Ma\u00eetriser le d\u00e9veloppement TypeScript dans Visual Studio Code - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/typescript-visual-studio.png","datePublished":"2024-03-18T09:25:29+00:00","dateModified":"2024-03-27T08:53:28+00:00","description":"Voici comment obtenir vos projets TypeScript et les utiliser avec l'environnement de d\u00e9veloppement int\u00e9gr\u00e9 Visual Studio Code de Microsoft.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/typescript-visual-studio.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/typescript-visual-studio.png","width":6084,"height":3042},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/typescript-visual-studio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Outils de d\u00e9veloppement web","item":"https:\/\/kinsta.com\/fr\/sujets\/outils-developpement-web\/"},{"@type":"ListItem","position":3,"name":"Ma\u00eetriser le d\u00e9veloppement TypeScript dans Visual Studio Code"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b","name":"Antonello Zanini","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ddf1b67f03071c679a5c8ae17ca733ea?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ddf1b67f03071c679a5c8ae17ca733ea?s=96&d=mm&r=g","caption":"Antonello Zanini"},"description":"Antonello is a software engineer, but prefers to call himself a Technology Bishop. Spreading knowledge through writing is his mission.","url":"https:\/\/kinsta.com\/fr\/blog\/author\/antonellozanini\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/76566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/305"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=76566"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/76566\/revisions"}],"predecessor-version":[{"id":76643,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/76566\/revisions\/76643"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76566\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76566\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76566\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76566\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76566\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76566\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76566\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76566\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/76567"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=76566"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=76566"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=76566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}