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

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

【 Node.js 】 用 TypeScript 和 Express 建立一個 http server

內容目錄

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 時，就會遵循該檔案的設定進行編譯。

可能會遇到的 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

在開發 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 檔。

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