基於TypeScript+Node.js+Express搭建服務器

前言

爲何要用TypeScript

鑑於JavaScript是弱類型語言和動態類型語言，所以JavaScript在變量聲明的時候無需指定變量的類型，在聲明以後即可爲其賦值不一樣的類型。所以在多人團隊的開發裏面，JavaScript的這種「便捷」反而會帶來不少麻煩。

Cannot read property 'xxx' of undefined
'xxx' is not a function/object
'xxx' is not defined
複製代碼

TypeScript就是爲了解決JavaScript的問題而產生。 與JavaScript截然相反，TypeScript使用的是強類型語言和靜態類型語言，有寫過Java的同窗應該會感到很是親切。TypeScript在多人團隊開發時候便成爲了避免錯的選擇。

強/弱類型、動/靜類型、GC 和 VM，你真的分清楚了麼？

編譯器推薦使用VS CODE，對TyepScript的支持很是友好

開始

初始化項目

在你的項目新建一個文件夾，如helloTS，打開helloTS

快速的建立一個package.json

npm init -y
複製代碼

安裝TypeScript

npm install typescript -s
複製代碼

新建tsconfig.json文件

tsc --init
複製代碼

tsconfig.json結構以下

{
  "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 the root directory of input files. Use to control the output directory structure with --outDir. */
    ···
  }
}
複製代碼

在helloTS目錄下新建build、src文件夾，此時的目錄結構爲

├──helloTS
       ├──build
       ├──src
       └──tsconfig.json
複製代碼

將tsconfig.json下的outDir路徑修改成./build，rootDir路徑修改成./src

此時tsconfig.json結構以下

{
  "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 */
    ···
  }
}
複製代碼

至此，tsconfig.json的配置到此結束，其他配置可查閱tsconfig配置文檔

安裝Express

npm install express -s
複製代碼

因爲咱們使用到了TypeScript，所以須要繼續引入相應的d.ts來識別

npm install @types/express -s
複製代碼

開始編寫

在咱們的項目helloTS中，咱們將建立一個名爲的文件夾app做爲啓動項。在此文件夾中，咱們將建立一個名爲app.ts如下內容的文件，此時的目錄結構爲

├──helloTS
       ├──build
       ├──src
          ├──app
             ├──app.ts
       └──tsconfig.json
複製代碼

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!');
});
複製代碼

進行編譯

執行命令行

tsc
複製代碼

你會發現build目錄裏生成了相應的js代碼，目錄結構以下

├──helloTS
       ├──build
          ├──app
             ├──app.js
       ├──src
          ├──app
             ├──app.ts
       └──tsconfig.json
複製代碼

再次執行命令行

node ./build/app/app.js
複製代碼

若提示Example app listening on port 3000!，恭喜你已經成功搭建好一個相對簡陋的服務器了。

問題

TypeScript調試

通過上述的操做，咱們會發現每次編譯的時候都須要使用tsc構建，而後再經過node開啓服務，若要進行開發，則會大大下降開發效率。

解決方法

使用ts-node

參考使用ts-node和vsc來調試TypeScript代碼

首先安裝ts-node

npm install ts-node -s-d
複製代碼

打開.vscode/launch.json配置文件（若是沒有此文件，請點擊菜單欄的調試->打開配置）修改成

{
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "啓動程序",
            "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"
        }
    ]
}
複製代碼

以後直接在VS Code上按F5刷新便可開啓，這下就能夠愉快地調試Ts了。

若是個人文章對你有幫助，能夠點贊鼓勵一下