ตัวจัดการเราเตอร์และการกำหนดชนิดข้อมูล Request/Response
กำหนดชนิดข้อมูลให้ตัวจัดการเส้นทางของ Express ได้แก่ พารามิเตอร์ คำค้น และเนื้อหา JSON พร้อมส่งการตอบกลับที่มีชนิดข้อมูลด้วย res.json และ DTO ที่นำกลับมาใช้ใหม่ได้
ตัวจัดการเราเตอร์และการกำหนดชนิดข้อมูล Request/Response เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
บทนำ
เป้าหมาย: เชื่อมต่อ API Express ขนาดเล็กด้วยชนิดที่เข้มงวด คุณจะระบุชนิดพารามิเตอร์เส้นทาง คิวรี และเนื้อหา JSON จากนั้นคืนค่า JSON ที่มีชนิดด้วย res.json
- อินเทอร์เฟซ DTO
Request<P, Res, Body, Q>res.jsonที่มีชนิด
การตั้งค่าเซิร์ฟเวอร์
เริ่มต้น Express และเปิดใช้การแยกวิเคราะห์ JSON ทำให้จุดปลายทางตรวจสอบสถานะมีขนาดเล็กและระบุชนิดด้วย Request/Response
import express, { Request, Response } from "express"
const app = express()
app.use(express.json())
app.get("/", (_req: Request, res: Response) => {
res.type("text/plain").send("OK")
})
app.listen(3000, () => console.log("http://localhost:3000"))พารามิเตอร์และคิวรี
ระบุชนิดของแต่ละช่องอย่างชัดเจน ได้แก่พารามิเตอร์ คิวรี และResBody การเติมโค้ดอัตโนมัติช่วยหลีกเลี่ยงการพิมพ์ผิด
import { Request, Response } from "express"
type Params = { id: string }
type Query = { verbose?: "1" | "0" }
type ResBody = { id: string; name: string; details?: string }
export function getUser(req: Request<Params, ResBody, unknown, Query>, res: Response<ResBody>) {
const { id } = req.params
const { verbose } = req.query
const body: ResBody = { id, name: "Ada", details: verbose === "1" ? "Loves math" : undefined }
return res.status(200).json(body)
}เนื้อหาและการตอบกลับที่มีชนิด
กำกับbodyสำหรับ POST/PUT พร้อมการตอบกลับที่มีชนิด DTO ของคุณจึงทำหน้าที่เป็นเอกสารประกอบไปด้วย
import { Request, Response } from "express"
type CreateUserBody = { name: string }
type CreateUserRes = { id: string; name: string }
export function createUser(req: Request<{}, CreateUserRes, CreateUserBody>, res: Response<CreateUserRes>) {
const { name } = req.body
const result: CreateUserRes = { id: "u_1", name }
return res.status(201).json(result)
}เชื่อมต่อเส้นทาง
ประกอบตัวจัดการขนาดเล็กที่มีชนิดเข้าด้วยกัน พารามิเตอร์เส้นทางจะถูกตรวจสอบโดยจับคู่กับแม่แบบ เช่น :id
import express from "express"
import { getUser } from "./getUser"
import { createUser } from "./createUser"
const app = express()
app.use(express.json())
app.get("/users/:id", getUser)
app.post("/users", createUser)
app.listen(3000, () => console.log("http://localhost:3000"))แนวทาง
แนวทาง:
- ทำให้ DTO มีขนาดเล็กและนำกลับมาใช้ในตัวจัดการต่าง ๆ
- ควรเลือกลิเทอรัลแบบยูเนียนสำหรับค่าคิวรีที่มีข้อจำกัด
- คืนค่ารหัสสถานะที่แม่นยำและ JSON ที่มีชนิด
ตรวจสอบการระบุชนิดของ Express
ตรวจสอบอย่างรวดเร็ว: จะระบุชนิดตัวจัดการ Express ที่มีพารามิเตอร์และเนื้อหา JSON ได้อย่างไร
สรุปทบทวน
สรุปทบทวน: คุณระบุชนิดพารามิเตอร์เส้นทาง คิวรี เนื้อหา และการตอบกลับแล้ว รูปแบบเดียวกันนี้ขยายไปใช้กับเราเตอร์และมิดเดิลแวร์ได้
คำถามที่พบบ่อย
บทเรียน “ตัวจัดการเราเตอร์และการกำหนดชนิดข้อมูล Request/Response” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตัวจัดการเราเตอร์และการกำหนดชนิดข้อมูล Request/Response” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ตัวจัดการเราเตอร์และการกำหนดชนิดข้อมูล Request/Response”
กำหนดชนิดข้อมูลให้ตัวจัดการเส้นทางของ Express ได้แก่ พารามิเตอร์ คำค้น และเนื้อหา JSON พร้อมส่งการตอบกลับที่มีชนิดข้อมูลด้วย res.json และ DTO ที่นำกลับมาใช้ใหม่ได้ คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน
บทเรียน “ตัวจัดการเราเตอร์และการกำหนดชนิดข้อมูล Request/Response” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ตัวจัดการเราเตอร์และการกำหนดชนิดข้อมูล Request/Response
- การตรวจสอบสคีมาด้วย zod และการอนุมานเป็น TS
- มิดเดิลแวร์ข้อผิดพลาดและชนิดข้อมูลผลลัพธ์