TypeScript 我們已經學的差不多了~接下來要進入實戰環節!這個章節我們會使用 Express 框架來實作簡單的 CRUD Web 後端應用程式,會選擇使用 Express 的原因也非常簡單。
本篇會先介紹如何使用 TypeScript 與 Express 建置基礎的後端專案,並讓它運作起來。
首先我們先輸入指令來初始化專案
npm init -y
接著輸入指令來安裝依賴
npm i express@5
npm i -D typescript ts-node nodemon @types/express @types/node
其中 npm i express@5
的意思是安裝 express 第 5 版本的意思,可以使用 npm i <package>@<version>
結構來安裝指定套件的版本。
而開發用依賴這邊也稍微介紹一下:
@types/express
:可以擴展 Express 的型別定義@types/node
:可以擴展 Node.js 的型別定義接著我們輸入指令來生成 tsconfig
設定檔。
tsc --init
並記得把設定調整成適合自己的專案架構,可以參考下方設定
{
"compilerOptions": {
"target": "es2022",
"module": "commonjs",
"rootDir": "./src",
"outDir": "./dist",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
當我們已經安裝好相關的依賴後,接下來就要撰寫我們的基礎後端程式碼。首先,在專案的根目錄下新建一個 src 資料夾,並在其中創建一個名為 main.ts 的檔案。這個檔案將包含我們使用 Express 建立後端應用程式的基本邏輯。
接下來,我們會使用 Express 建立一個簡單的後端應用程式,並提供根路由 (/
) 的 GET 請求來回應 Hello World
,以確保後端應用程式順利運行。我們會使用類別來封裝後端應用程式的初始化邏輯。
import express from 'express';
const port = process.env.PORT || 9453;
class Server {
private app = express();
start() {
this.app.get('/', (req, res) => {
res.send('Hello World');
});
this.app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
}
}
const server = new Server();
server.start();
程式碼說明
/
的 GET 請求,當請求到來時,後端應用程式會回應 Hello World
。app.listen()
方法讓後端應用程式開始在指定的 Port 上監聽請求,並在啟動後輸出一條確認訊息。為了啟動後端應用程式,我們在 package.json
撰寫啟動後端應用程式 scripts
如下:
{
// ...other
"scripts": {
"start": "ts-node ./src/main.ts"
},
// ...other
}
這時可以開啟 VSCode 內建的終端機輸入指令來啟用後端應用程式
npm start
此時應該會看到執行起來的結果如下:
而開啟瀏覽器網址輸入 http://localhost:9453/
應該可以看到畫面顯示 Hello World
目前我們的後端專案已經可以啟動並回應基本的 Hello World
,但是每次修改程式碼後,都需要手動重啟後端應用程式,這會相當麻煩。因此,我們可以利用 nodemon 這個套件來解決這個問題。
在 package.json
撰寫 scripts
如下:
{
// ...other
"scripts": {
"start": "ts-node ./src/main.ts",
"dev": "nodemon ./src/main.ts"
},
// ...other
}
這時可以開啟 VSCode 內建的終端機輸入指令來啟用後端應用程式
npm run dev
這樣每當我們修改檔案時,後端應用程式都會自動重啟,讓開發過程更加順暢。
這篇文章介紹了如何用 TypeScript 和 Express 建置一個簡單的後端專案,並讓它運作起來。從專案初始化、安裝相關依賴、設定 TypeScript,到撰寫簡單的 Hello World
,我們逐步建立了一個可以執行的後端應用程式。
接下來幾篇,我們可以開始實作更多功能,包含 CRUD 操作、路由規劃、中間件的使用,以及驗證功能與自己實作存儲資料的解決方案。
本篇程式碼變更可以看此 PR