Express

https://www.geeksforgeeks.org/introduction-to-express/

Express 是一個快速、靈活、輕量化的 Node 框架，大家用它來實作 web server 的功能、簡化 API ，且在 Node 的 HTTP object 中加入了一些有用的功能，對動態 render HTTP object 有很大的幫助。

我主要是想拿 Express 來做 API，希望可以快速上手！

延伸學習 MEAN Stack ⇒ (MongoDB, Express, Angular.js, Node.js)

Node.js with Express

1. 在 Node 環境裝 Express npm install express
2. 確認目前版本 npm --version express，我的是 9.6.7
3. 下指令 node express-init.js 執行下面這段 JS

範例解析

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

JS work! Let’s try to write in TS!

Express with TypeScript

發現有 Node 其實有比較完整的配置、安裝方法，而不是像我這樣東拼西湊

接下來跟著 TypeScript Setup With Node & Express 學習怎麼妥善配置！

1. 初始化 TypeScript Compiler tsc，會新增一個 tsconfig.json 的配置檔

   npx tsc --init
   

2. tsconfig.json 更新，只更改下列這幾樣，其餘保持原樣

   	{
     "compilerOptions": {
       "target": "ES6",
       "outDir": "./dist",
       "rootDir": "./src",
   		"moduleResolution": "node",
     }
   }
   

3. 初始化 npm，生成初始的 package.json 設定檔

   npm init -y
   

4. 裝本篇的主角 express，裝完之後會在 package.json 這邊看到 dependencies 出現 express

   npm i express
   

   

5. 裝一些開發用的套件

   npm i -D typescript ts-node nodemon @types/node @types/express
   

6. 編輯 package.json 來設定幾個會用到的 script

   "scripts": {
       "start": "node ./dist/app.js", // 用 node 把編譯好的 JS 跑起來
       "dev": "nodemon ./src/app.ts", // 觀察 server 執行的狀態
       "build": "tsc -p ." // 編譯此目錄下的檔案
   },
   

7. 用剛剛設定好的指令，執行看看上面的範例程式

   npm run dev
   

8. 在程式中加入最重要的 type，存檔，就會看到 console 跑出 nodemon 的更新訊息

   // 把 express 中 會用到的型別都 import 進來，就不用一個一個寫 express.xxxxx
   import express, {Application, Request, Response, NextFunction} from 'express';
   
   // express.Application
   const app: Application = express();
   const port: number = 3000;
   
   const add = (a: number, b: number): number => {
       return a+b;
   };
   
   app.get('/', (req: Request, res: Response, next: NextFunction) => {
       console.log(add(5, 5));
       res.send('Hello World!');
   });
   
   app.listen(port, () => {
       console.log(`Server running at port ${port}...`);
   });
   

   

9. 到 localhost:3000 重新整理，就可以看到 console 印出 10