• Chinese version of TypeScript Tutorial – Project introduction
  • TypeScript Tutorial Chinese version – Section 0. preface
  • TypeScript Tutorial Chinese version – Section 1. An introduction to
  • TypeScript Tutorial Chinese version – Section 2. Basic types of
  • TypeScript Tutorial Chinese version – Section 3. Control flow statement
  • TypeScript Tutorial Chinese – Section 4. function
  • TypeScript Tutorial Chinese version – Section 5. class
  • TypeScript Tutorial Chinese version – Section 6. interface
  • TypeScript Tutorial Chinese version – Section 7. High-level types
  • TypeScript Tutorial Chinese version – Section 8. The generic
  • TypeScript Tutorial Chinese version – Section 9. The module
  • Chinese version of TypeScript Tutorial – Section 10.node.js

Section 10. Node.js

Node.js

The original address

In this tutorial, you’ll learn to build an automated development environment for node.js projects using TypeScript.

This tutorial assumes that you have the Node.js and TSC modules installed on your system.

Creating a directory structure

Start by creating a new directory, nodets.

Next, create two subdirectories under the nodets directory, build and SRC, as shown below:

The TypeScript code is stored in the SRC directory, and the compiler’s output files are stored in the Build directory.

Configure the TypeScript compiler

Open a macOS and Linux terminal or Windows command prompt and run the following command in the nodets directory to create the tsconfig.json file:

tsc --init
Copy the code

You will see the tsconfig.json file added to the nodets directory:

The tsconfig.json configuration specified directory (nodets) is the root directory of TypeScript projects. When you compile TypeScript files, the TypeScript compiler uses the configuration in tsconfig.json to compile the project.

Now, you can open the tsconfig.json file, which has a lot of options. In this tutorial, we’ll focus on two options:

  • rootdir– Specify the root directory for TypeScript input files
  • outdir– Specifies the directory for JavaScript output files

These options are commented out by default, you need to uncomment them (remove the // at the beginning of the line) and change the configuration as follows:

For the outDir option:

"outDir": "./build"
Copy the code

For the rootDir option:

"rootDir": "./src"
Copy the code

To verify that the new configuration works, create a new file called app.ts in the./ SRC directory and type:

console.log('Node.js TypeScript');
Copy the code

To compile the TypeScript compiler, run the following command, which compiles all files stored in the SRC directory:

tsc
Copy the code

If the configuration is correct and valid, you should see app.js generated in the./build directory:

Navigate to the build directory and execute the following command to run the app.js file:

node app.js
Copy the code

See the following output:

Node.js TypeScript
Copy the code

Whenever you modify TypeScript code, you need to:

  • Construction project;
  • Run the JavaScript output file.

It’s a waste of time. Fortunately, you can automate this process using node.js modules.

Install the Node.js module

The Nodemon module allows you to restart the application after modifying the JavaScript source code.

The CONCURRENTLY running module allows multiple commands.

Start with the NPM init command in the root directory:

npm init --yes
Copy the code

Next, install nodemon and CONCURRENTLY modules:

npm install --g nodemon concurrently
Copy the code

It will take a while to install them, and once they are installed we will continue with the following steps.

Note — the G flag indicates that NPM will install both modules globally and you can use them in other projects.

Next open the package.json file and in the scripts option you will see the following code:

."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"},...Copy the code

Change scripts to the configuration shown below:

."scripts": {
    "start:build": "tsc -w"."start:run": "nodemon build/app.js"."start": "concurrently npm:start:*"},...Copy the code

“Start :build”:” tsc-w “will listen for changes in files under./ SRC and recompile those files when they change.

“Start :run”:” Nodemon build/app.js” Whenever a new file is generated, run the app.js file in the./build directory again.

“Start “:” Concurrently NPM :start:*” Runs all commands starting with NPM :start:*, which executes the start:build and start:run commands above.

Since app.js is the entry point to the Node.js program, you also need to change the main configuration in the package.json file to app.js, as shown below:

"main": "index.js"
Copy the code

Modified to:

 "main": "app.js"
Copy the code

Finally, run the following command:

npm start
Copy the code

To verify that the configuration has taken effect, modify some of the code in app.ts and you will see some new execution output on the console.