本篇文章將從 node 環境創建，安裝相關套件，並配置 typescript，逐步完成一個使用 typescript 的 express 應用。
基礎 express 環境
建立 node 環境
pnpm init
安裝 express 與其他相關套件
pnpm i express
- express: node.js 的 web framework
pnpm i -D typescript nodemon ts-node
- nodemon: 修改代碼後，自動重新啟動的開發工具
- typescript: 編譯 ts 套件
- ts-node: 可以直接執行 .ts 文件的 node 環境 (開發環境下 nodemon 會使用此套件直接執行 .ts 文件)
- 安裝 node 與 express 的型別
pnpm i -D @types/node @types/express
@types/node: node 的型別@types/express: express 的型別
修改 package.json 中 scripts
"scripts": {
"dev": "nodemon index.ts",
"build": "tsc",
"start": "node ./dist/index.js"
},完整 package.json
{
"name": "express-with-ts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "nodemon index.ts",
"build": "tsc",
"start": "node ./dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.18.2"
},
"devDependencies": {
"@types/express": "^4.17.20",
"@types/node": "^20.8.10",
"nodemon": "^3.0.1",
"ts-node": "^10.9.1",
"typescript": "^5.2.2"
}
}基礎 express 代碼
index.ts
import express from 'express';
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('hello');
});
app.listen(port, () => {
console.log(`Example app url: http://localhost:${port}`);
});此時，可以先執行 pnpm dev 看看能不能成功
配置 typescript
創建 typescript 環境
執行 tsc --init 初始化 tsconfig.json，此時會自動產生 tsconfig.json，裡面已經有預設配置
輸出目錄
在 tsconfig.json 中搜尋 outDir 配置項，可以配置輸出目錄，此範例中我們設定為 dist (搭配 package.json 中 script 的 start)
"outDir": "./dist"延伸閱讀
如此一來，我們就成功建構了能以 ts 開發的 express
在此基礎下，可以去參考我寫的其他文章
