VScode 自動編譯TypeScript的配置

1. 首先安裝 typescript

npm install -g typescript
           

2. 在目前目錄打開指令行，生成tsconfig.json檔案

tsc --init
           

3. 在目前目錄打開指令行，生成 tsconfig.json 檔案

打開tsconfig.json檔案修改和删除相應配置（如果想快速修改配置，請複制下列配置），不配置也可以直接使用預設配置

{
  "compilerOptions": {
   "target": "es5", // 指定ECMAScript目标版本 這裡選擇es5
   "noImplicitAny": false, // 隐藏“any”類型在表達式和聲明上引發錯誤，這裡選擇不隐藏
   "module": "es2015", // 選擇子產品化加載規範 這裡選擇es2015 就是es6加載規範
   "removeComments": false, // 不輸出注釋 這裡選擇 輸出 
   "sourceMap": false, // 生成相應的'.map'檔案 這裡選擇否
   "allowSyntheticDefaultImports": true // 允許從沒有設定預設導出的子產品中預設導入。這并不影響代碼的輸出，僅為了類型檢查。
  }
}
           

這樣就會預設在目前.ts檔案所屬的檔案夾下生成對應的.js檔案

中文 tsconfig.json 配置資訊檢視 請點選這裡——https://www.tslang.cn/docs/handbook/compiler-options.html

4. 打開自己的 .ts 檔案 寫自己的 ts 代碼

export class Hello {
    
}
           

5. 點選 VScode 上方菜單欄的 終端——運作任務——tsc:監視-tsconfig.json

出現下面的頁面說明監視成功

6. 此時在目前目錄下就會自動生成檔案hello.js了，然後我們在編輯ts檔案的時候，就會自動監視.ts檔案的改變進而生成對應的.js代碼。

剛學 typescript 就卡在了 vscode 自動編譯這裡 然後就自己查了文檔 對網上現有的文檔進行總結和簡化 希望能對大家有幫助 有錯誤也請大家給我留言 Thanks♪(･ω･)ﾉ