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

引言

大概對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$

在這里插入圖片描述
4. 配置完成 OK ->apply ->OK

6、測試使用

在這里插入圖片描述
編寫一行TS格式代碼，【ctrl+s】保存你會發現編譯器會自動執行轉換

然后TS文件下就會自動生成一個JS文件，里面的代碼就是從TS中轉換而來的

在新生成的JS文件中，右鍵 -> Run 即可

其他方法編譯TypeScript

如果你不喜歡WebStorm,你可以參考菜鳥教程中使用Visual Studio Code來開發Typescript（附安裝手把手教程）
【菜鳥網】TypeScript 安裝

本文鏈接：https://blog.csdn.net/RayCongLiang/article/details/104513482

智能推薦

Typescript學習筆記（一）

Typescript學習筆記（一）文章目錄 Typescript學習筆記（一）定義什么是Typescript? 為什么要使用typescript 靜態類型基礎類型引用類型特殊類型高級類型定義什么是Typescript? TypeScript帶來了可選的靜態類型檢查以及最新的ECMAScript特性。TypeScript是JavaScript類型的超集，它可以編譯成純JavaScr...

typescript學習筆記（一）

目錄一、typescript是什么？二、安裝三、執行代碼四、聲明變量并指定類型 (1)講解 (2)變量的練習五、數據類型 1、分類 2、加號引發的思考 3、三元運算符六、調試ts代碼七、數組八、函數九、接口 9.1 對象的類型注解 9.2對象方法的類型注解 9.3接口的使用十、內置對象一、typescript是什么？ ts是js的超集（js有的ts都有） ts=type+Ja...

TypeScript 1，TypeScript概述 1，JavaScript是什么 javascript是一種運行在客戶端中的編程語言。當應用于瀏覽器時，為網站提供動態交互特性，讓網頁動起來。運行環境：瀏覽器，nodejsTypeScript 1，TypeScript概述 1，JavaScript是什么 javascript是一種運行在客戶端中的編程語言。當應用于瀏覽器時，為網站提供動態交互特性...

typescript學習筆記（一）

1.在線編輯器 typescript 官網：https://www.typescriptlang.org/play?#code/G4QwTgBAtgngdiKBTCBeARALwM7oNwBQokA5kgC4CCZqAZgK5wDG5AlgPZwAUAlAN4EIQiGAr0wcCACYADIQC+BJp2zsANkgB0a9iS4ADWBATIIrbBAAkfWCaTz9PQsriqN23QaM...

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...