vscode nodejs build ts environment

As a front-end developer, we usually use Node.js and TypeScript as the basic tools for development. During the development process, we may encounter many problems and problems. One of the biggest problems is how to build a good TypeScript environment. In this article, we will introduce how to set up a Node.js TypeScript environment in Visual Studio Code.

Preparation

First, we need to download the latest version of Node.js. We can download and install it directly from the official website (https://nodejs.org). After the download is complete, we can verify whether the installation was successful by entering node -v on the command line.

Next, we need to download and configure Visual Studio Code. You can download and install Visual Studio Code from the official website https://code.visualstudio.com/download. Then, open Visual Studio Code and install the TypeScript extension. To do this, we can search for "TypeScript" in the extension bar on the left side of Visual Studio Code and install it.

Create Project

After completing the above preparations, we can start creating our project. In Visual Studio Code, we can create a new project by selecting "File" -> "Open Folder" in the menu bar. Here, we can choose any empty folder as our project folder. Then, we can open the terminal and enter the project folder through the cd command.

Installing dependencies

In order for our TypeScript project to interact well with Node.js, we need to install two important dependencies: typescript and ts-node. To do this, we can enter npm install typescript ts-node in the terminal to install.

Configuring TypeScript

After the installation is complete, we can configure the TypeScript environment. Create a new file named tsconfig.json in the project folder and add the following code in it:

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

This file contains the basic settings for compiling TypeScript code. Among them, we can set the compilation target, module type, output directory, etc.

Create code file

Now, we have completed the configuration of TypeScript. Next, we can start writing our code files. We can create a new folder named src in the project folder, and create a new TypeScript file named index.ts in it. We can then add the following code in the index.ts file:

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

Compile TypeScript to JavaScript

We have written a simple TypeScript file, now we It needs to be compiled into a JavaScript file to run in Node.js. We can compile TypeScript files into JavaScript files by using the following command in the terminal:

npx tsc

This will generate a file named index.js## under the dist folder # document. We can run this file by typing node dist/index.js in the terminal. We should see output similar to Hello from TypeScript! on the terminal.

However, manually compiling TypeScript files each time can be very tedious. Therefore, we can use the

ts-node dependency to run TypeScript code directly without compilation. We can run TypeScript code by entering the following command in the terminal:

npx ts-node src/index.ts

This will directly output

Hello from TypeScript! without compilation.

Summary

In this article, we learned how to build a simple Node.js TypeScript environment. We installed Node.js, Visual Studio Code and TypeScript extensions, as well as other necessary dependencies. We created a TypeScript project and did the basic setup and coding. We also learned to use

ts-node to directly execute TypeScript code without having to compile it manually. I hope this article can help you understand the TypeScript environment.

The above is the detailed content of vscode nodejs build ts environment. For more information, please follow other related articles on the PHP Chinese website!