Node.js TypeScript

【 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 來監聽檔案是否有儲存的動作。

typescript

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

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

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

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

1 thought on “【 Node.js 】如何在 Node.js 中建立 TypeScript 的環境”

  1. 謝謝你的經歷分享,覺得很簡單清楚,給了我很多動力跟更為明確的努力方向!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top