【TypeScript學習筆記1】WebStorm 2019環境下配置TypeScript項目【非原創】

原創

2020-06-22 14:36

引言

大概對JavaScript腳本語言瞭解以後，開始向JS的超集也就是TypeScript領域進軍，此篇筆記是參考Cr博主的TypeScript - (二) 在WebStorm中創建和配置TypeScript項目
本人編寫本博文的用意：2019版本下的WebStorm配置TypeScript資源少，並且作爲本人學習筆記，不作其他用意。

運行原理

運行原理都一樣，安裝好node,TypeScript後，你可以使用Windows的控制檯cmd，對剛剛編寫的ts文件使用tsc xxx.ts 轉換成js再執行，可是這樣的動作太繁瑣，因此就誕生了一系列的插件。
【編寫ts文件->編譯器自動轉換成js->運行js文件】

安裝步驟

1、安裝WebStorm

WebStorm官網下載

本人使用的WebStorm版本是：2019.3.1，本篇博文也是針對2019版本

2、安裝NodeJs

NodeJs官網下載
由於本文並不是以安裝WebStorm,NodeJs爲主，並且這些步驟也不難，就不詳細寫了，而且安裝軟件是程序猿最重要的技能之一。

3、運行NodeJs並安裝TypeScript編譯器

打開電腦cmd運行【Win+R】+cmd
如果NodeJs安裝並且環境配置成功：
任意目錄下輸入node -v會有版本號
安裝TypeScript
使用npm命令安裝TypeScript編譯器
輸入npm install typescript -g

我電腦已經安裝過了，但是如果你們安裝成功也應該跟我的類似。
唯一要注意的是：TypeScript的路徑，等下配置WebStorm要使用！

4、運行WebStorm並創建一個普通項目

tsconfig.json的具體配置可以使用默認的，詳細配置可以在官網查詢：
【TypeScript中文網】編譯選項
我的配置是這樣的：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

5、WebStorm配置TypeScript

File -> Settings
Language & Frameworks -> TypeScript 【配置TS語言規範】
如果你也是2019版本，你也找了很多教程，你會發現2019版本的WebStorm的TS設置界面是不一樣的（少了很多東西）

還記得剛剛安裝TypeScript完成後顯示的安裝路徑嗎？這裏就要引用安裝好的tsc.cmd文件
Tools -> File Watchers 【配置TS文件自動編譯爲JS文件】

這裏默認沒有TS的，需要自己創建
TypeScript
–target “ES5”
$FileNameWithoutExtension$ .js
$FileDir$