【 Node.js 】如何在 Node.js 中建立 TypeScript 的環境

最近開始在學習用 TypeScript 建立前後端，簡單筆記一下該如何在 Node.js 中建立 TypeScript 的環境。

這篇文章建立的是沒有 coding style 的 TypeScript 環境，如果想要導入 airbnb 或是 Google 的 TypeScript style，可以參考：
【 TypeScript 】建立 Google TypeScript Style 的 Node.js 環境
前端工程師邁向後端之路 4 – 用 Node.js 架設 http server

1. 什麼是 TypeScript?

TypeScript 是為了彌補 JavaScript 不足的地方而誕生的語言，最主要的差別就在於宣告變數或是執行函數時需要指定 type ，不過這篇的重點在於在 Node.js 中建立 TypeScript 的環境，所以就不描述太多 TypeScript 的特性了。

2. 初始化 npm 專案

2.1 建立專案資料夾

$ mkdir node-project-typescript

2.2 進入該資料夾

$ cd node-project-typescript

2.3 初始化專案

$ npm init

3. 安裝 TypeScript 與 express

$ npm install --save-dev typescript @types/express @types/node
$ npm install --save express

4. 設定 TypeScript

安裝 TypeScript 時，也會同時安裝將 TypeScript 編譯成 JavaScript 的編譯器 — tsc 。

4.1 初始化 tsc

tsc --init 後會產生 tsconfig.json，當 TypeScript 透過 tsc 編譯成 JavaScript 時，就會遵循該檔案的設定進行編譯。

可能會遇到的 error :

• 如果有 ‘tsc command not found’ 這個 error message ，請先在 global 安裝 typescript 。
  npm install -g typescript
• 在 global 安裝完後如果還有 ‘tsc command not found’ 這個 error message ，請 export tsc 這個 command line 的路徑，ex: npm install -g typescript 後會出現以下畫面

• 這時候在 terminal 輸入：
  export PATH=”$PATH:/Users/jimmy2952/.npm-global/lib/node_modules/typescript/bin/”
  再輸入 tsc -v ，確認 tsc 的版本即可。

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5", // 選擇要編譯成哪種版本的 JavaScript
    "module": "commonjs",
    "strict": true, // 嚴格模式，啟用後需要指定函數參數的 type
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "dist" // 將編譯過後的js檔放到dist資料夾中
  }
}

官網有 tsconfig.json 所有屬性的說明，請參考官網。

5. 新增進入點檔案

$ mkdir src

$ touch app.ts

// app.ts
import express from 'express';
​
const app = express();
const port = 3000;
app.get('/', (req, res) => {
  res.send('The server is working!');
});
app.listen(port, () => {
  if (port === 3000) {
    console.log('true')
  }
  console.log(`server is listening on ${port} !!!`);
});

6. 安裝 nodemon 與 ts-node

在開發 Node.js 的過程中，常會用到 nodemon 套件，讓開發者可以在每次儲存檔案後自動重啟 node ，看到即時的修正，ts-node 則是用來監聽 ts 檔案是否有儲存的動作，有的話就重啟 node 。

$ npm install --save-dev nodemon ts-node

7. 修改 package.json

"scripts": {
  "start": "nodemon src/app.ts", // 選擇進入點檔案
  "build": "tsc --project ./",
  "test": "echo \"Error: no test specified\" && exit 1"
}

npm start後，nodemon 即會用 ts-node 來監聽檔案是否有儲存的動作。

npm run build後則會出現一個 dist 資料夾來存放編譯過後的 js 檔。

延伸閱讀：【 Node.js 】 用 TypeScript 和 Express 建立一個 http server

看完這篇文章是不是想換工作了呢（咦？那就千萬別錯過 2024 職涯博覽會！想換工作的，有機會在博覽會遇見更好的另一半，不想換工作的，有機會在博覽會遇見更好的工作！趕快點擊下面的 banner，拯救你的人生！！！https://s.yourator.co/jimmy

如果覺得我的文章有幫助的話，歡迎幫我的粉專按讚哦~謝謝你！