vscode配置Typescript自動編譯環境

vscode下配置Typescript編譯環境

步驟

1. 首先需要安裝Nodejs node -v
2. 安裝typescript模塊 npm install -g typescript
3. 可查看typescript模塊版本號 tsc -v
4. 在window + r —> 輸入cmd進入該項目目錄, 或 項目中Ctrl + ~, 創建tsconfig.json tsc --init
5. 在項目目錄下會生成一個tsconfig.json文件
6. 默認: 大部分是註釋的, 可以根據各自的需要來定製, tsconfig.json詳解

tsconfig.json配置

"compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "allowJs": true
    "sourceMap": true,
    "outDir": "./js/",   /* Redirect output structure to the directory. */
    "rootDir": "./tscript/", 
    "removeComments": false,  //刪除註釋
    "noImplicitAny": false,
    ...更多配置項
  },
      
  // 可以修改target爲es6 
  // 要調試把 sourceMap改爲true
  // 添加allowjs爲true,就可以ts和js混合用了

vscode 自動編譯Typescript

1. 快速打開終端 Ctrl + ~
2. 輸入: cmd .
3. tsc -w

測試

1. 例: 新建tscript，用作存放typescript文件**【tsconfig.json中配置輸出文件夾】**。
2. tscript —>建 .ts後綴測試文件 var test:number = 4;
3. Ctrl + s 保存, 自動編譯 Typescript文件
4. 點擊拆分編輯器, 右邊可時時預覽編譯後的**.js文件**