Typescript開發nodejs項目+調試

目的

用typescript開發node server程序，並做到hot-reload和ts文件上的debug

技術棧

• routing-controllers
• VSCode
• nodemon

問題1：什么是routing-controller

先感受一下routing-controller

import {JsonController, Get, Post, Param, Delete, Body} from "routing-controllers";
import {Service} from "typedi";
import {CategoryRepository} from "../repository/CategoryRepository";
import {Category} from "../model/Category";

@Service()
@JsonController()
export class CategoryController {

    constructor(private categoryRepository: CategoryRepository) {
    }

    @Get("/categories")
    all(): Promise<Category[]> {
        return this.categoryRepository.findAll();
    }

    @Get("/categories/:id")
    one(@Param("id") id: number): Category {
        return this.categoryRepository.findOne(id);
    }
}

一股滿滿的SpringMVC既視感，對於開發過JavaWeb的我來說上手很快，完整示例

問題2：如何調試

調試的初級方法是print、console，進階就是下斷點debug，我們是不是能把斷點下在ts文件里而不是編譯后的js里呢？當然可以。
配置launch.json：菜單->調試->添加配置

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch server.js via nodemon",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "nodemon",
            "program": "${workspaceRoot}/dist/app", 
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        }
    ]
}

配置完之后即可通過菜單->調試->啟動調試或者快捷鍵來啟動調試更詳細的launch.json配置

問題三 hot-reload

nodemon的作用是一檢測到文件修改就重啟node server，不用再先終止進程再啟動了。現在我們還差一步就是.ts文件一修改就重新編譯

tsc -w //很簡單

總結

每次開始編寫程序前先執行tsc -w 然后F5開始調試，每次一修改ts文件就會重新編譯和發布，在ts文件中也可以任意下斷點

相關操作

> git clone https://github.com/pleerock/routing-controllers-koa-demo.git    
> cd routing-controllers-koa-demo    
> yarn install / npm install     
vscode>調試>添加配置    
> tsc -w    
F5     
（設置斷點）    
瀏覽器打開 http://localhost:3000/categories