快速建立 Typescript 環境

Lastor

Published in

Code 隨筆放置場

9 min readDec 23, 2021

自己接觸 Typescript 也有一小段時間了，現在做專案傾向能用 TS 就會盡量上 TS，就連平常的小練習，也都讓自己多去使用 TS 來寫。

於是這邊就想分享一下，快速建立 TS 環境的幾個做法，提供給對 TS 有興趣但沒用過的人參考。

(泛用) 使用 Typescript cli
(前端) 使用 React or Vue 建 TS 專案
(前端) 使用 Vite 建 TS 專案
(後端) 使用 ts-node + ts-node-dev

建議初次使用時，可先用 TS cli 來操作，初步了解一下是個甚麼狀況。

(泛用) 使用 Typescript cli

TS 本身並不是一個獨立的語言，它是 Javascript 上的一個套件，直接透過 npm 下載就可以使用。個人感覺還是裝在 local 上而不是 global 會比較好。因為 team work 時，其他人不見得有在 global 上裝 Typescript，就算有裝，搞不好版本還不一樣等等，這樣還不如裝在 local 上大家統一來的安定。

$ npm install typescript
or
$ yarn add typescript

概念上跟 Sass、Pug 那類預處理器一樣，因為 TS 寫法不完全符合 JS 的格式，Javascript runtime 看不懂，所以需要編譯成 .js 之後才能使用。

既然要編譯，那就需要一個設定檔去告訴 TS 要怎麼編譯，像是編譯後檔案該放到哪之類的。安裝了 typescript 之後，就可以直接用 cli 來控制，生成一個預設的 config 檔。

$ npx tsc --init
or
$ yarn tsc --init

建立出來之後，會發現 TS 把所有的設定全都列出來了，並且附上註解。這邊僅介紹最重要的部分，其他可依個人需要再去加。

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",       // 要編譯成 ES 幾
    "module": "CommonJS",     // 模塊方案
    "esModuleInterop": true,  // ES module 方案智能轉換
    "outDir": "./dist",       // 輸出資料夾
  },
  "include": ["./src/**/*"]   // 要編譯的對象
}

config 不寫，直接上一個空物件 {} 也是可以的，它就會自己去找所有的 .ts 檔案編譯到相同位置。這邊採用 React、Vue 都在使用的資料夾結構，把要被編譯的檔案都放在 ./src 資料夾，將輸出的檔案放在 ./dist 資料夾。

- project_root
  - dist/
  - src/
  - json, config...

搞定輸入輸出之後，再來要選擇編譯目標跟要用哪種 module 方案。對 JS 有一定認識的人應該多少都知道，JS 經歷過一段 module 混亂的年代。現在一般會將 module 設為 CommonJS，然後再開啟 esModuleInterop 兼容模式。

target 的部分，TS 其實也會做一些 babel 在做的事，可以選擇要輸出成哪一個版本的 ECMAScript。反正練習專案，無腦設 ESNext 就好。

接著比較重要的是 watch 模式，不然每改一行就手動編譯一次還頗煩的。TS 跟其他預處理器一樣，都有提供 watch 功能。

$ npx tsc --watch
or
$ yarn tsc --watch

知道這些就可以弄個 Hello World 出來了。其他更詳細的 config 設定，可以有需求的時候再去 Google or 爬 TS 官方技術文件。

But!!

要做練習專案，或是 prototype 的時候，光這樣是絕對不夠的，因為我們還會需要拉其他套件啊。所以前端的情況，最終還是得用 Webpack 之類的東西來打包。

Webpack 的操作不是這篇文章的重點，就不多提了。有興趣的可以參考個人以前分享過的文章：

Webpack 簡易打包與 Eva.js 試用

(前端) 使用 React or Vue 建 TS 專案

這邊介紹個人以前常用的方法，直接用 Create React App 或是 vue-cli 建一個 TS 專案出來。如果只是臨時要測一些 TS 語法，也可以直接拿舊的 React or Vue 專案來用。

這邊就不贅述，只是提供一個思路。這兩家的官網對於 TS 的引入已有詳細的說明文件。

Create React App — Adding TypeScript

Vue.js — TypeScript Support

使用這種方式的話，可以順便參考一下這兩大家的 tsconfig 寫了些啥，且對 Webpack 跟常用的各種設置都有完善的支援，不用從零自己設定。

但是缺點也很明顯，就是專案會很肥。有時候只是想做一個小東西，根本不想拉一個完整的 React 或是 Vue 下來。

所以就要來介紹下一個方法啦。

(前端) 使用 Vite 建 TS 專案

又要來推廣一下強大的 Vite 了。在之前的文章也有介紹過 Vite，以及粗略地跟 Webpack 比較了一下上手速度，這邊不重複說明，可以參考這篇文章：

Vite + Phaser 3 打磚塊小遊戲 (上)

Vite 官方也有寫一篇說明，介紹他們是為了解決 Webpack 的何種問題，以及與其他打包工具的比較。

Vite — Why Vite

Vite 是針對現代瀏覽器以及前端開發所設計出來的打包工具，由於是 Vue 體系的東西，所以對 Vue 的支持度最優。當然，也有提供 React 的腳手架與各種解決方案。

與現存的以 Webpack 為主的腳手架相比，Vite 最明顯的優勢就是速度極快，本身也較輕量，並且提供「開箱即用」的懶人設計，用過一次就回不去了，就此揮別 CRA 與 vue-cli。

除了 React 與 Vue 的專案建置之外，最重要的是它也有提供 Pure Javascript 的腳手架，並且可以選擇 Typescript。

建立 Vite 專案：

$ npm init vite@latest
or
$ yarn create vite

這邊使用了比較新的 npm 指令 init [target]，可以直接遠端呼叫 vite 包裡面事先寫好的，用於建立專案的腳本。等待短暫的下載時間之後，就可以看到跟 vue-cli 同款的 cmd 提示。選自己要的即可。

單純要快速建個有打包工具支持的 TS 環境的話，直接選 vanilla-ts 無框架的原生 TS 方案。初始狀態下，要安裝的包只有 vite 跟 typescript，所以建立速度極快。

// package.json
"devDependencies": {
  "typescript": "^4.4.4",
  "vite": "^2.7.0"
}

Vite 專案建立時，不會順便 download module，所以也節省了不少下載時間。可以在查看 package.json 到底有裝啥之後，再決定是否要刪減，還是直接安裝。由於把安裝依賴套件的部分拆了開來，也可以比較容易的選擇要用 npm 還是 yarn。

// 安裝依賴
$ npm install
or
$ yarn install

安裝完後，與 CRA 和 vue-cli 專案相同，下個簡單的指令，就可以啟動本機端的 dev server 了。

$ npm run dev
or
$ yarn dev

(後端) 使用 ts-node + ts-node-dev

最後來介紹一下後端，也就是在 Node.js 環境下運行 Typescript 的方案。後端與前端不同，最終執行 script 的環境並不是瀏覽器，也就不會有打包工具的需求。

但是 .ts 檔仍舊需要編譯成 .js 才能被 Node.js 執行。概念上還是需要使用上面介紹的第一種方法來處理。可現在有一些 lib 支持直接運行 .ts 檔，也就是 ts-node 這個套件。這可以讓我們用更貼近原先 js 的操作方式來進行開發。

// 用 Node.js 執行 .js
$ node app.js// 用 ts-node 執行 .ts
$ npx ts-node ./src/app.js

同時 VScode 的常用插件 Code Runner 也採用 ts-node 來執行 .ts 檔案。可以在 VScode 的 global settings.json 指定，以 local 專案的 ts-node 來執行。

{
  "code-runner.executorMap": {
    "typescript": "npx ts-node"  // 加入 npx 指令
  },
}

再來就是開發 Node Server 時，watch 模式的問題。一般會借助 nodemon 之類的套件來處理。避免每次修改 script，都得重啟一次，非常麻煩。

而 ts-node-dev 就是類似 nodemon 的玩意，當 script 修改後會自動重啟 server。指令大致感覺如下：

$ npx tsnd ./src/app.ts

ts-node-dev 在 Github 上的官方文檔則是推薦加兩個指令。

$ npx tsnd --respawn --transpile-only app.ts

--respawn 是當腳本結束後，仍然保持監視。而 --transpile-only 則是僅編譯，不做 type 檢查，這樣運行速度會更快。

但實作時會發現，光是這樣設定還不夠，有些檔案不會被監控到。所以個人是直接 watch 整個 src 資料夾，一勞永逸。

$ npx tsnd  --watch ./src --respawn --transpile-only app.ts

ts-node-dev 在 command 語法上，是承襲 node-dev 以及 ts-node，可以做的設置還蠻多的，真要做一些比較深入的設置，可能會需要花點時間研究。不過，上述的基本設置應該就能解決很多情況了。

最後要注意的是，ts-node 是簡化了手動編譯再執行的操作，但他還是會進行編譯，所以運行效能一定會比編譯後再去執行 .js 要來的耗效能。因此正式的產品模式，最好還是乖乖的把 TS 編譯出來，讓 node 去跑 .js 會更理想。

快速建立 Typescript 環境

(泛用) 使用 Typescript cli

(前端) 使用 React or Vue 建 TS 專案

(前端) 使用 Vite 建 TS 專案

(後端) 使用 ts-node + ts-node-dev

Written by Lastor