快速建立 Typescript 環境
自己接觸 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 的操作不是這篇文章的重點,就不多提了。有興趣的可以參考個人以前分享過的文章:
(前端) 使用 React or Vue 建 TS 專案
這邊介紹個人以前常用的方法,直接用 Create React App 或是 vue-cli 建一個 TS 專案出來。如果只是臨時要測一些 TS 語法,也可以直接拿舊的 React or Vue 專案來用。
這邊就不贅述,只是提供一個思路。這兩家的官網對於 TS 的引入已有詳細的說明文件。
Create React App — Adding TypeScript
使用這種方式的話,可以順便參考一下這兩大家的 tsconfig 寫了些啥,且對 Webpack 跟常用的各種設置都有完善的支援,不用從零自己設定。
但是缺點也很明顯,就是專案會很肥。有時候只是想做一個小東西,根本不想拉一個完整的 React 或是 Vue 下來。
所以就要來介紹下一個方法啦。
(前端) 使用 Vite 建 TS 專案
又要來推廣一下強大的 Vite 了。在之前的文章也有介紹過 Vite,以及粗略地跟 Webpack 比較了一下上手速度,這邊不重複說明,可以參考這篇文章:
Vite 官方也有寫一篇說明,介紹他們是為了解決 Webpack 的何種問題,以及與其他打包工具的比較。
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
會更理想。