用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中