vs code 配置 typescript 環境

用npm安裝typescript之類的東西就不說了

1. 首先創建一個文件夾作爲項目目錄,然後用vs code打開,並在目錄上創建main.ts文件,敲入代碼 console.log("hello world"); 作爲運行測試用

現在如果直接運行,會提示"Cannot launch project xxxxx, javascript cannot be found.",在這個提示框中,點擊Open launch.json,它會自動創建一個launch.json,不過暫時可以不管這個launch.json

2. vs 菜單欄中點開Terminal,選擇New Terminal,下面會有terminal窗口,可以輸入一些ts的指令,如果你的環境沒問題,那麼,輸入 tsc -init ,vs code會自動在項目根目錄下創建一個 tsconfig.json 文件 ,然後我們需要修改它

3.  關於tsconfig.json的中配置選擇,我沒有專門去研究它,只羅列平時自己用的吧

compilerOptions 的選項有些是被註釋掉的,下面我列出來的如果有被註釋掉的,則需要打開

1) target是ts的版本,我用的是默認的es5

2) sourceMap是ts斷點用的,設爲true,否則打不了斷點

3) outDir爲運行目錄,我將它修改爲 "./bin",這樣ts編譯後輸出的js文件全都會放在這裏,不會顯示那麼亂

4) allowJs爲是否編譯目錄下的js文件,默認爲true估計好一些,原因忘了

除了默認的compilerOptions,其實還可以添加另一個字段 exclude,你的項目裏,可能存在一些目錄是不需要ts去編譯的,比如bin,lib,node_modules等等,把它們統統列到exclude裏面去


4. 現在就可以回到launch.json了,由於定了輸出目錄,所以應當建個src文件夾把源碼全轉到src下面比較整潔,那麼 launch.json 中的program也應當由 "${workspaceFolder}\\main.ts" 修改爲"${workspaceFolder}\\src\\main.ts"

5. 由於使用的是ts語言,所以需要先編輯再運行,所以請選擇並點擊菜單欄中的 Run Build Task,然後在彈出選擇中選擇 tsc-build task.json,main.ts會自動被編譯成main.js並輸出到bin目錄下,這時候,選擇菜單欄下的Debug中的Start Debug,項目就能跑起來了。

不過這還沒完,因爲如果每次都需要手動去build的話,那就太不方便了,所以現在要修改launch.json,將 "preLaunchTask": "tsc: build - tsconfig.json" 添加進去,別忘了逗號

這麼一來,你就不用手動編譯了,現在嘗試在hello world 後面加上 it's me,然後直接Start Debug,項目就能跑起來了,可能你看不到打印,這是因爲項目在編譯的時候會自動切換到Teminal窗口下,編譯完了卻不會自動切回Debug Console,的確有點煩。

6. 至於網傳的什麼task.json,好像沒卵用

7. node的庫如何引用?在Teminal中輸入node i @types/node,敲回車就可以了,要記得將node_modules文件夾添加到tsconfig.json的exclude中

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章