preface

Why TypeScript

Because JavaScript is a weakly typed and dynamically typed language, JavaScript does not need to specify the type of a variable when it is declared, but can assign different types to it after it is declared. This “convenience” of JavaScript can cause a lot of trouble in multi-team development.

Cannot read property 'xxx' of undefined
'xxx' is not a function/object
'xxx' is not defined
Copy the code

TypeScript was created to solve JavaScript problems. In contrast to JavaScript, TypeScript uses a strongly typed and statically typed language, which will be very familiar to those of you who have written Java. TypeScript is a good choice for multi-team development.

Strong/weak, dynamic/static, GC and VM, do you really know the difference?

The compiler recommends VS CODE and TyepScript support is very friendly

start

Initialize the project

Create a new folder in your project, such as helloTS, and open helloTS

Create a package.json file quickly

npm init -y
Copy the code

Install the TypeScript

npm install typescript -s
Copy the code

Create a new tsconfig.json file

tsc --init
Copy the code

Tsconfig. json is structured as follows

{
  "compilerOptions": {
    ···
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": ". /",                       /* Concatenate and emit output to single file. */
    // "outDir": ". /",                        /* Redirect output structure to the directory. */
    // "rootDir": ". /"Specify root directory of input files. Use to control the output directory structure with --outDir. */ ···}}Copy the code

Create a new build/SRC folder in the helloTS directory with the directory structure as

├ ─ ─ helloTS ├ ─ ─ build ├ ─ ─ the SRC └ ─ ─ tsconfig. JsonCopy the code

Json. Change the outDir path to./build and rootDir to./ SRC

The tsconfig.json structure is as follows

{
  "compilerOptions": {
    ···
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": ". /",                       /* Concatenate and emit output to single file. */
    // "outDir": "./build",                   /* Redirect output structure to the directory. */
    // "rootDir": "./src",                    /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                     /* Enable project compilation */
    // "tsBuildInfoFile": ". /", /* Specify file to store incremental compilation information */ ···}}Copy the code

At this point, the tsconfig.json configuration is complete, and you can refer to the tsconfig configuration documentation for the rest of the configuration

Install Express

npm install express -s
Copy the code

Since we use TypeScript, we need to continue to introduce the corresponding D.ts for recognition

npm install @types/express -s
Copy the code

Begin to write

In our project helloTS, we will create a folder called APP as a startup. In this folder, we will create a file named app.ts with the following directory structure

├ ─ ─ helloTS ├ ─ ─ build ├ ─ ─ the SRC ├ ─ ─ app ├ ─ ─ app. Ts └ ─ ─ tsconfig. JsonCopy the code

app.ts

import express = require('express');

// Create a new express application instance
const app: express.Application = express();

app.get('/', (req, res) => {
  res.send('Hello World! ');
});

app.listen(3000, ()=> {
  console.log('Example app listening on port 3000! ');
});
Copy the code

To compile

Execute command line

tsc
Copy the code

You will find the corresponding JS code generated in the build directory, which is structured as follows

├ ─ ─ helloTS ├ ─ ─ build ├ ─ ─ app ├ ─ ─ app. Js ├ ─ ─ the SRC ├ ─ ─ app ├ ─ ─ app. Ts └ ─ ─ tsconfig. JsonCopy the code

Execute the command line again

node ./build/app/app.js
Copy the code

Example app listening on port 3000! Congratulations, you have successfully built a relatively humble server.

The problem

TypeScript debugging

After the above operations, we will find that every time we compile, we need to use TSC to build, and then start the service through Node, which will greatly reduce the development efficiency.

The solution

Use ts – node

See debugging TypeScript code with TS-Node and VSC

Install ts-Node first

npm install ts-node -s-d
Copy the code

Open the. Vscode /launch.json configuration file (if you don’t have this file, go to Debug -> Open Configuration on the menu bar) and change it to

{
    "configurations": [{"type": "node"."request": "launch"."name": "Start program"."runtimeArgs": [
                "--nolazy"."-r"."ts-node/register"]."args": [
                "${workspaceRoot}/src/app/app.ts"]."env": { "TS_NODE_PROJECT": "tsconfig.json" },
            "sourceMaps": true."cwd": "${workspaceRoot}"."protocol": "inspector"."console": "integratedTerminal"."internalConsoleOptions": "neverOpen"}}]Copy the code

Then you can refresh VS Code directly by pressing F5, and you can debug Ts happily.

If my article is helpful to you, you can give it a thumbs up