如何在 node.js 中建立 TypeScript 的環境

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

內容目錄

1. 什麼是 TypeScript?

TypeScript 是為了彌補 JavaScript 不足的地方而誕生的語言，最主要的差別就在於宣告變數或是執行函數時需要指定 type ，不過這篇的重點在於在 nodeJS 中建立 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 時，就會遵循該當暗的設定進行編譯。

// 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

在開發 nodeJS 的過程中，常會用到 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 檔。