0Pricing
TypeScript Academy · บทเรียน

ตัวจัดการเราเตอร์และการกำหนดชนิดข้อมูล 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ตัวจัดการเราเตอร์และการกำหนดชนิดข้อมูล Request/Response
  2. การตรวจสอบสคีมาด้วย zod และการอนุมานเป็น TS
  3. มิดเดิลแวร์ข้อผิดพลาดและชนิดข้อมูลผลลัพธ์
← กลับไปที่ TypeScript Academy