TypeScript筆記 — 開發環境安裝

發表於 更新於 分類於
由於每次看完教學就忘記流程了😭，所以決定還是寫一篇筆記來記錄一下

由於每次看完教學就忘記流程了 😭，所以決定還是寫一篇筆記來記錄一下

安裝 Node

第一步先安裝 node.js，一般都是建議安裝穩定版本(LTS)

安裝 TypeScript

看自己的需求，要局部安裝或是全域安裝都可以，打開終端機執行以下指令

1
2
3
4
5
#全域安裝
npm install typescript -g

#安裝在專案底下
npm install typescript --save-dev

安裝完畢後可以執行 tsc -v ，確認 TypeScript 版本，有看到版本號的話就是安裝成功

將 ts 檔案編譯成 js 檔

假設我們想要從瀏覽器看到程式碼的執行結果， 就需要把 ts 檔案編譯成 js 檔，因為瀏覽器只看得懂 js

先打開專案資料夾，在根目錄底下新增 index.ts，並且隨意寫一行 ts 語法

1
let a: string = "abc";

接著在終端機執行

1
tsc index.ts

就會發現目錄底下除了 index.ts，還多了一隻剛剛編譯出來的 index.js

不過每次更改檔案都要手動執行 tsc xxx，實在是很不方便，執行以下指令，就會進入 watch mode(監聽模式)，有任何的異動就會馬上做編譯

1
2
3
tsc index.ts --watch

tsc index.ts --w #縮寫，功能同上

建立 ts 設定檔  — tsconfig.json

為了在開發時可以針對 ts 做更彈性化的設定，需要建立 tsconfig.json ，在專案根目錄底下打開終端機執行以下指令

1
tsc --init

執行之後，就會在根目錄看到 tsconfig.json

tsconfig 設定介紹

打開 tsconfig.json 會看到密密麻麻的設定檔，乍看之下有點嚇人，不過其實每個設定屬性後面都有寫著對應說明，讓初心者可以了解每個設定值的用途為何，接下來會列舉幾個常用的設定，若之後有用到更多設定會再補充上來

  • 資料夾目錄設定

畢竟開發的時候通常開發(ts)和編譯(js)的檔案會有各自的資料夾，因此我們可以設定下面兩個屬性，更改檔案來源和輸出的所在資料夾，執行指令的時候，會找到./src 底下的.ts 做編譯，並將編譯後的.js 輸出到./dist 這個資料夾

1
2
rootDir: "./src", //ts 檔案所在目錄
outDir: "./dist", //js 輸出檔案目錄
  • sourceMap : true

將 sourceMap 設定為 true 的話，就會在編譯後產出對應的 xxx.js.map， .map 檔的作用就是記錄著編譯前後的對應關係，假設我想要在瀏覽器除錯，我會希望瀏覽器告訴我這一行程式碼是在.ts 的第幾行，而不是在.js 的第幾行，有了 sourceMap 在開發上會比較直覺

  • removeComments : true

在編譯的時候刪除註解，不然會被看光光