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 enteringnode -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 thecd
command.
Installing dependencies
In order for our TypeScript project to interact well with Node.js, we need to install two important dependencies:typescript
andts-node
. To do this, we can enternpm 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 namedtsconfig.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 namedsrc
in the project folder, and create a new TypeScript file namedindex.ts
in it. We can then add the following code in theindex.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 namedindex.js## under the
distfolder # document. We can run this file by typing
node dist/index.jsin the terminal. We should see output similar to
Hello from TypeScript!on the terminal.
ts-nodedependency 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
Hello from TypeScript!without compilation.
ts-nodeto 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!