Maison > interface Web > Questions et réponses frontales > vscode nodejs crée un environnement ts

vscode nodejs crée un environnement ts

WBOY
Libérer: 2023-05-17 11:11:37
original
1376 Les gens l'ont consulté

En tant que développeur front-end, nous utilisons généralement Node.js et TypeScript comme outils de base pour le développement. Au cours du processus de développement, nous pouvons rencontrer de nombreux problèmes et problèmes. L'un des plus gros problèmes est de savoir comment créer un bon environnement TypeScript. Dans cet article, nous expliquerons comment configurer un environnement Node.js TypeScript dans Visual Studio Code.

Preparation

Tout d'abord, nous devons télécharger la dernière version de Node.js. Nous pouvons le télécharger et l'installer directement depuis le site officiel (https://nodejs.org). Une fois le téléchargement terminé, nous pouvons vérifier si l'installation a réussi en entrant node -v sur la ligne de commande. node -v 来验证是否安装成功。

接下来,我们需要下载和配置 Visual Studio Code。您可以从官方网站 https://code.visualstudio.com/download 下载和安装 Visual Studio Code。然后,打开 Visual Studio Code 并安装 TypeScript 扩展。为此,我们可以在 Visual Studio Code 左侧的扩展栏中搜索 “TypeScript” 并进行安装。

创建项目

完成上述准备工作后,我们可以开始创建我们的项目。在 Visual Studio Code 中,我们可以在菜单栏中选择 “文件”->“打开文件夹”来创建一个新项目。在此处,我们可以选择任意一个空文件夹来作为我们的项目文件夹。然后,我们可以打开终端,通过 cd 命令进入项目文件夹。

安装依赖

为使我们的 TypeScript 项目能与 Node.js 进行良好的交互,我们需要安装两个重要的依赖:typescriptts-node。为此,我们可以在终端中输入 npm install typescript ts-node 进行安装。

配置 TypeScript

安装完成后,我们可以为 TypeScript 环境进行配置。在项目文件夹中新建一个名为 tsconfig.json 的文件,在其中添加以下代码:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
Copier après la connexion

这个文件包含了编译 TypeScript 代码的基本设置。 其中,我们可以设置编译目标,模块类型,输出目录等等。

创建代码文件

现在,我们已经完成了 TypeScript 的配置。接下来,我们就可以开始编写我们的代码文件。我们可以在项目文件夹中新建一个名为 src 的文件夹,并在其中新建一个名为 index.ts 的 TypeScript 文件。然后,我们可以在 index.ts 文件中添加以下代码:

console.log("Hello from TypeScript!");
Copier après la connexion

将 TypeScript 编译为 JavaScript

我们已经编写了一个简单的 TypeScript 文件,现在我们需要将其编译为 JavaScript 文件以便在 Node.js 中运行。我们可以通过在终端中使用以下命令将 TypeScript 文件编译为 JavaScript 文件:

npx tsc
Copier après la connexion

这将会在 dist 文件夹下生成一个名为 index.js 的文件。我们可以通过在终端中输入 node dist/index.js 来运行这个文件。我们应该会在终端上看到类似于 Hello from TypeScript! 的输出。

但是,每次手动编译 TypeScript 文件可能会非常繁琐。因此,我们可以使用 ts-node 依赖来直接运行 TypeScript 代码,而无需进行编译。我们可以在终端中输入以下命令来运行 TypeScript 代码:

npx ts-node src/index.ts
Copier après la connexion

这将会直接输出 Hello from TypeScript!,而无需进行编译。

总结

在本文中,我们学习了如何搭建一个简单的 Node.js TypeScript 环境。我们安装了 Node.js,Visual Studio Code 和 TypeScript 扩展程序,以及其他必要的依赖。我们创建了一个 TypeScript 项目,并进行了基本的设置和代码编写。我们还学会了使用 ts-node

Ensuite, nous devons télécharger et configurer Visual Studio Code. Vous pouvez télécharger et installer Visual Studio Code à partir du site officiel https://code.visualstudio.com/download. Ensuite, ouvrez Visual Studio Code et installez l'extension TypeScript. Pour ce faire, nous pouvons rechercher « TypeScript » dans la barre d'extension sur le côté gauche de Visual Studio Code et l'installer. #🎜🎜##🎜🎜#Créer un projet#🎜🎜##🎜🎜#Après avoir terminé les préparatifs ci-dessus, nous pouvons commencer à créer notre projet. Dans Visual Studio Code, nous pouvons créer un nouveau projet en sélectionnant "Fichier" -> "Ouvrir le dossier" dans la barre de menu. Ici, nous pouvons choisir n'importe quel dossier vide comme dossier de projet. Ensuite, nous pouvons ouvrir le terminal et entrer dans le dossier du projet via la commande cd. #🎜🎜##🎜🎜#Installation des dépendances#🎜🎜##🎜🎜#Pour que notre projet TypeScript interagisse correctement avec Node.js, nous devons installer deux dépendances importantes : typescript et ts-node. Pour ce faire, nous pouvons saisir npm install typescript ts-node dans le terminal pour l'installer. #🎜🎜##🎜🎜#Configuration de TypeScript#🎜🎜##🎜🎜#Une fois l'installation terminée, nous pouvons configurer l'environnement TypeScript. Créez un nouveau fichier nommé tsconfig.json dans le dossier du projet et ajoutez-y le code suivant : #🎜🎜#rrreee#🎜🎜#Ce fichier contient les paramètres de base pour compiler le code TypeScript. Parmi eux, nous pouvons définir la cible de compilation, le type de module, le répertoire de sortie, etc. #🎜🎜##🎜🎜#Créer un fichier de code #🎜🎜##🎜🎜#Maintenant, nous avons terminé la configuration de TypeScript. Ensuite, nous pouvons commencer à écrire nos fichiers de code. Nous pouvons créer un nouveau dossier nommé src dans le dossier du projet et y créer un nouveau fichier TypeScript nommé index.ts. Ensuite, nous pouvons ajouter le code suivant dans le fichier index.ts : #🎜🎜#rrreee#🎜🎜#Compile TypeScript en JavaScript#🎜🎜##🎜🎜#Nous avons écrit un simple fichier TypeScript , nous devons maintenant le compiler dans un fichier JavaScript à exécuter dans Node.js. Nous pouvons compiler des fichiers TypeScript en fichiers JavaScript en utilisant la commande suivante dans le terminal : #🎜🎜#rrreee#🎜🎜#Cela générera un fichier nommé index sous le dossier <code>dist js<.> fichier. Nous pouvons exécuter ce fichier en tapant node dist/index.js dans le terminal. Nous devrions voir une sortie similaire à Bonjour de TypeScript ! sur le terminal. #🎜🎜##🎜🎜#Cependant, compiler manuellement des fichiers TypeScript à chaque fois peut être très fastidieux. Par conséquent, nous pouvons utiliser la dépendance ts-node pour exécuter du code TypeScript directement sans compilation. Nous pouvons entrer la commande suivante dans le terminal pour exécuter du code TypeScript : #🎜🎜#rrreee#🎜🎜#Cela affichera directement Bonjour de TypeScript ! sans compilation. #🎜🎜##🎜🎜#Summary#🎜🎜##🎜🎜#Dans cet article, nous avons appris à créer un environnement Node.js TypeScript simple. Nous avons installé les extensions Node.js, Visual Studio Code et TypeScript, ainsi que d'autres dépendances nécessaires. Nous avons créé un projet TypeScript et effectué la configuration et le codage de base. Nous avons également appris à utiliser ts-node pour exécuter directement du code TypeScript sans avoir à le compiler manuellement. J'espère que cet article pourra vous aider à comprendre l'environnement TypeScript. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal