使用typescript開發調試nodejs

原文地址 https://github.com/xiadd/blog/issues/8

這兩天在看ts,也在入門中, 網上大部分教程都是前端配置ts開發調試,這個也有不少至關成熟的實踐教程, 這篇文章主要是nodejs的ts配置, 提及來也是至關簡單的, 不涉及任何ts的語法與概念, 同時也能夠根據本文配置es6的nodejs開發環境(主要是模塊部分).

ts-node的使用

提及 babel-node 你們應該都挺熟悉了, ts-node是一個相似的工具,能夠在不編譯的狀況的執行ts文件,方便咱們開發, 固然是node環境下的.

安裝

npm i -D typescript ts-node

建立app.ts文件:

//app.ts
console.log(1)

調用命令ts-node app.ts(全局安裝的狀況下), 若是一切正常的話,咱們應該能夠看到想要的輸出了.

一直到上面都是常規話題, 沒什麼深刻下去的意義. 下面講到ts-node的調試

調試

根據nodejs官網 咱們知道nodejs的調試方法有下面幾種:

1. node-inspect 一個第三方開發的調試工具, 今天咱們不涉及
2. chrome 開發者工具, 下面會講到
3. vs code 今天的重點
4. vs
5. webstorm 也是至關方便的工具

vs code的調試

根據官網咱們打開node的inspect模式(ts-node一樣能夠)ts-node --inspect app.js, 應該能夠看到相似的的提示:

這樣表示已經能夠進行調試了, 可是貌似不能夠進行打斷點之類的操做, 這個就要藉助vscode了.

打開vscode debug面板增長調試選項, 選擇attach to progess:

而後點擊debug, 會彈出相似下面的彈窗:

注意紅框, 會有幾個node進程, 選擇帶inpect的那個進程, 若是一切進行的正常的話就能夠進行調試了:

chrome 開發者工具

這個更加簡單, 在任意網頁打開開發者工具, 咱們能夠看到如圖

點擊node圖標一樣能夠進行調試:

可是貌似不是很穩定, 常常崩潰, 並且windows上也有問題.

最後是個示例: https://github.com/xiadd/node-ts

感興趣能夠star