最近開始在學習用 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 :

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