vscode nodejs erstellt eine TS-Umgebung-Front-End-Fragen und Antworten-php.cn

Als Frontend-Entwickler verwenden wir normalerweise Node.js und TypeScript als grundlegende Entwicklungswerkzeuge. Während des Entwicklungsprozesses können wir auf viele Probleme und Probleme stoßen. Eines der größten Probleme besteht darin, eine gute TypeScript-Umgebung aufzubauen. In diesem Artikel stellen wir vor, wie Sie eine Node.js TypeScript-Umgebung in Visual Studio Code einrichten.

Vorbereitung

Zuerst müssen wir die neueste Version von Node.js herunterladen. Wir können es direkt von der offiziellen Website (https://nodejs.org) herunterladen und installieren. Nachdem der Download abgeschlossen ist, können wir überprüfen, ob die Installation erfolgreich war, indem wir in der Befehlszeile node -v eingeben. 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 进行良好的交互，我们需要安装两个重要的依赖：typescript 和 ts-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"]
}

Nach dem Login kopieren

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

创建代码文件

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

console.log("Hello from TypeScript!");

Nach dem Login kopieren

将 TypeScript 编译为 JavaScript

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

npx tsc

Nach dem Login kopieren

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

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

npx ts-node src/index.ts

Nach dem Login kopieren

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

总结

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

Als nächstes müssen wir Visual Studio Code herunterladen und konfigurieren. Sie können Visual Studio Code von der offiziellen Website https://code.visualstudio.com/download herunterladen und installieren. Öffnen Sie dann Visual Studio Code und installieren Sie die TypeScript-Erweiterung. Dazu können wir in der Erweiterungsleiste auf der linken Seite von Visual Studio Code nach „TypeScript“ suchen und es installieren. 🎜🎜Projekt erstellen🎜🎜Nach Abschluss der oben genannten Vorbereitungen können wir mit der Erstellung unseres Projekts beginnen. In Visual Studio Code können wir ein neues Projekt erstellen, indem wir in der Menüleiste „Datei“ -> „Ordner öffnen“ auswählen. Hier können wir einen beliebigen leeren Ordner als unseren Projektordner auswählen. Dann können wir das Terminal öffnen und den Projektordner über den Befehl cd aufrufen. 🎜🎜Abhängigkeiten installieren🎜🎜Damit unser TypeScript-Projekt gut mit Node.js interagiert, müssen wir zwei wichtige Abhängigkeiten installieren: typescript und ts-node . Dazu können wir im Terminal npm install typescript ts-node eingeben, um es zu installieren. 🎜🎜TypeScript konfigurieren🎜🎜Nachdem die Installation abgeschlossen ist, können wir die TypeScript-Umgebung konfigurieren. Erstellen Sie im Projektordner eine neue Datei mit dem Namen tsconfig.json und fügen Sie den folgenden Code hinzu: 🎜rrreee🎜Diese Datei enthält die Grundeinstellungen zum Kompilieren von TypeScript-Code. Darunter können wir das Kompilierungsziel, den Modultyp, das Ausgabeverzeichnis usw. festlegen. 🎜🎜Codedatei erstellen🎜🎜Jetzt haben wir die Konfiguration von TypeScript abgeschlossen. Als nächstes können wir mit dem Schreiben unserer Codedateien beginnen. Wir können einen neuen Ordner mit dem Namen src im Projektordner erstellen und darin eine neue TypeScript-Datei mit dem Namen index.ts erstellen. Anschließend können wir den folgenden Code in die Datei index.ts einfügen: 🎜rrreee🎜TypeScript zu JavaScript kompilieren🎜🎜Wir haben eine einfache TypeScript-Datei geschrieben, jetzt müssen wir sie zur Ausführung in eine JavaScript-Datei kompilieren in Node.js. Wir können TypeScript-Dateien in JavaScript-Dateien kompilieren, indem wir den folgenden Befehl im Terminal verwenden: 🎜rrreee🎜Dadurch wird eine Datei mit dem Namen index.js im Ordnerdokument dist generiert. Wir können diese Datei ausführen, indem wir im Terminal node dist/index.js eingeben. Auf dem Terminal sollte eine Ausgabe ähnlich der von Hello from TypeScript! angezeigt werden. 🎜🎜Allerdings kann es sehr mühsam sein, TypeScript-Dateien jedes Mal manuell zu kompilieren. Daher können wir die Abhängigkeit ts-node verwenden, um TypeScript-Code direkt ohne Kompilierung auszuführen. Wir können TypeScript-Code ausführen, indem wir den folgenden Befehl in das Terminal eingeben: 🎜rrreee🎜Dadurch wird Hello from TypeScript! ohne Kompilierung direkt ausgegeben. 🎜🎜Zusammenfassung🎜🎜In diesem Artikel haben wir gelernt, wie man eine einfache Node.js TypeScript-Umgebung erstellt. Wir haben Node.js, Visual Studio Code und TypeScript-Erweiterungen sowie andere notwendige Abhängigkeiten installiert. Wir haben ein TypeScript-Projekt erstellt und die grundlegende Einrichtung und Codierung durchgeführt. Wir haben auch gelernt, mit ts-node TypeScript-Code direkt auszuführen, ohne ihn manuell kompilieren zu müssen. Ich hoffe, dieser Artikel kann Ihnen helfen, die TypeScript-Umgebung zu verstehen. 🎜

Das obige ist der detaillierte Inhalt vonvscode nodejs erstellt eine TS-Umgebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!