สร้างโปรเจ็ค Express + TypeScript

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

• Express webiste
• 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

1
{
2
  "compilerOptions": {
3
    "target": "es2016",
4
    "module": "commonjs",
5
    "esModuleInterop": true,
6
    "forceConsistentCasingInFileNames": true,
7
    "strict": true,
8
    "skipLibCheck": true,
9
    "outDir": "dist"
10
  }
11
}

สร้างไฟล์ src/app.ts ขึ้นมา เป็น Express แบบง่ายๆ ด้วย TypeScript

1
import express, { Express, Request, Response } from 'express'
2

3
const app: Express = express()
4

5
const port: number = 3000
6

7
app.get('/', (req: Request, res: Response) => {
8
  res.json({
9
    message: 'Hello Express + TypeScirpt!!'
10
  })
11
})
12

13
app.listen(port, () => console.log(`Application is running on port ${port}`))

เพิ่ม Script ใน package.json สำหรับ build และ start Server

• start - สำหรับรัน express ที่ build แล้ว
• build - เอาไว้ compile TypeScript
• start:ts - เอาไว้รัน express แบบไม่ต้อง compile ด้วย ts-node (dev mode)

1
{
2
  "scripts": {
3
    "start:ts": "ts-node src/app.ts",
4
    "start": "node dist/app.js",
5
    "build": "tsc"
6
  }
7
}

Note: ตัวโปรเจ็คเป็นแบบง่ายๆนะครับ การนำไปใช้ Production ยังต้องมี config เพิ่ม รวมถึงยังขาด config อีกหลายส่วนครับ

ทีนี้ เราก็แค่ build และ start ก็จะได้โปรเว็บ Express + TypeScript แบบง่ายๆแล้ว

npm run build
npm start

Done!

หรือตัวเลือก ใครอยากได้แบบ generator ลองใช้ตัวนี้ได้ครับ

• Express generator TypeScript

Happy Coding ❤️