สร้างโปรเจ็ค Express + TypeScript
วิธีการเริ่มโปรเจ็คด้วยการใช้ Express.js กับ TypeScript ซึ่งช่วงหลังๆ ผมก็แทบไม่ค่อยได้จับงาน Backend ซักเท่าไหร่ และไม่ได้ใช้ Express แล้ว วันนี้ว่างๆ ก็เลยลองขึ้นโปรเจ็ค Express เล่นๆ ดูด้วย TypeScript ก็เลยนำมาเขียนเป็นบล็อกเอาไว้

เริ่มต้นสร้างโปรเจ็คด้วยคำสั่ง
npm init -y
ติดตั้ง Express
npm install express
ติดตั้ง TypeScript และ Types ของ express
และ node
npm install -D typescript @types/node @types/express ts-node
สร้างไฟล์ tsconfig.json
ด้วยคำสั่ง init
tsc --init
จะได้ไฟล์ tsconfig.json
ขึ้นมา เพิ่ม outdir
เป็น dist
เวลาที่ build typescript จะให้มัน generate file JavaScript ไปที่โฟลเดอร์ dist
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"outDir": "dist"
}
}
สร้างไฟล์ src/app.ts
ขึ้นมา เป็น Express แบบง่ายๆ ด้วย TypeScript
// src/app.ts
import express, { Express, Request, Response } from 'express'
const app: Express = express()
const port: number = 3000
app.get('/', (req: Request, res: Response) => {
res.json({
message: 'Hello Express + TypeScirpt!!',
})
})
app.listen(port, () => console.log(`Application is running on port ${port}`))
เพิ่ม Script ใน package.json
สำหรับ build
และ start
Server
start
- สำหรับรัน express ที่ build แล้วbuild
- เอาไว้ compile TypeScriptstart:ts
- เอาไว้รัน express แบบไม่ต้อง compile ด้วยts-node
(dev mode)
// package.json
{
"scripts": {
"start:ts": "ts-node src/app.ts",
"start": "node dist/app.js",
"build": "tsc",
}
}
Note: ตัวโปรเจ็คเป็นแบบง่ายๆนะครับ การนำไปใช้ Production ยังต้องมี config เพิ่ม รวมถึงยังขาด config อีกหลายส่วนครับ
ทีนี้ เราก็แค่ build
และ start
ก็จะได้โปรเว็บ Express + TypeScript แบบง่ายๆแล้ว
npm run build
npm start
Done!
หรือตัวเลือก ใครอยากได้แบบ generator ลองใช้ตัวนี้ได้ครับ
Happy Coding ❤️