1.到node.js官網下載安裝node.js

2.下載安裝Webstorm

3.使用npm命令安裝TypeScript編譯器:npm install typescript -g,檢查是否安裝成功:tsc -v

4.開啟Webstorm,為TypeScript檔案更改編譯設置,

「File」 --> 「Settings」--> 「File Watchers」--> 「點擊右側 + 號」--> 「custom」

配置如下

Program:D:\Program Files\nodejs\node_global\tsc.cmd
Arguments:--sourcemap --target "ES5"(可以選擇ES6)
Output paths to refresh:$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map
Working directory:$FileDir$

ts配置es5.PNG

ts配置es6.PNG

 

5. tsconfig.json配置

{
  "compilerOptions": {

   // 遵循的JavaScript模塊規範。主要的候選項有:commonjsAMDes2015   // 為了後面與node.js保持一致,選用commonjs   "module": "commonjs",

   // 編譯之後生成的JavaScript檔案需要遵循的標准。
   // 有三個選項:es3es5es2015 (es6)
   "target": "es5",

   // 編譯時是否生成對應的source map檔案。這個文件主要用於前端調試。
   // 當前端js檔案被壓縮引用後,出錯時可借助同名的source map文件查找源檔案中錯誤位置。
   "sourceMap": false,

   // 編譯生成的JavaScript檔案是否移除注釋。
   "removeComments": false,

   // false時,如果編譯器無法根據變量的使用來判斷類型時,將用any類型代替。
   // true時,將進行強類型檢查,無法推斷類型時,提示錯誤。
   "noImplicitAny": false,

   // 編譯輸出JavaScript檔案存放的資料夾
   "outDir":"js"
  },

  // includeexclude:編譯.ts時需要包含 / 忽略的資料夾
  "exclude": [
   "node_modules"
  ]
}
arrow
arrow
    文章標籤
    WebStorm TypeScript
    全站熱搜

    bingzhichen 發表在 痞客邦 留言(0) 人氣()