TypeScript Academy · บทเรียน

ตัวแยกวิเคราะห์เส้นทางระดับชนิดข้อมูลฉบับย่อ

แยกวิเคราะห์เส้นทางเราเตอร์เป็นออบเจ็กต์พารามิเตอร์ที่มีชนิดข้อมูล

ตัวแยกวิเคราะห์เส้นทางระดับชนิดข้อมูลฉบับย่อ เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

เป้าหมาย

เราจะสร้าง ตัวแยกวิเคราะห์เส้นทาง ที่อ่านเส้นทางอย่าง "users/:id/posts/:postId" แล้วสร้างออบเจ็กต์พารามิเตอร์ที่มีชนิดข้อมูล { id: string; postId: string } ทั้งหมดนี้เกิดขึ้นระหว่างการคอมไพล์ นี่เป็นรูปแบบจริงที่เราใช้ในตัวกำหนดเส้นทางซึ่งมีชนิดข้อมูล

type Params = ParseRoute<"users/:id/posts/:postId">;
// Goal: { id: string; postId: string }

การระบุพารามิเตอร์

ส่วนของเส้นทางจะเป็นพารามิเตอร์เมื่อขึ้นต้นด้วย ":" เราจับคู่คำนำหน้านั้นด้วยลิเทอรัลแม่แบบ แล้วอนุมานชื่อพารามิเตอร์ที่อยู่หลังเครื่องหมายโคลอน

สัญกรณ์: ใน TypeScript จริง ชนิดลิเทอรัลแม่แบบจะเขียนด้วยสตริงที่คั่นด้วยเครื่องหมายแบ็กทิกและมีช่องแทนค่าดอลลาร์-วงเล็บปีกกา ในตัวอย่างเหล่านี้ เราแสดงรูปแบบดังกล่าวเป็น Tpl<...> โดยเรียงส่วนต่าง ๆ ตามลำดับ ตัวอย่างเช่น แม่แบบแบ็กทิกที่จับคู่คำนำหน้าลิเทอรัลแล้วตามด้วย Rest จะแสดงเป็น Tpl<'prefix', infer Rest>

type ParamName<S> = S extends Tpl<':', infer Name> ? Name : never;
// Tpl<...> denotes a backtick template literal type: a colon then Name

type X = ParamName<':id'>;   // 'id'
type Y = ParamName<'users'>; // never

การแยกเส้นทาง

ขั้นแรกให้แยกเส้นทางออกเป็นส่วน ๆ ด้วย "/" โดยนำชนิด Split กลับมาใช้ แต่ละส่วนจะเป็นค่าลิเทอรัลหรือพารามิเตอร์

type Split<S extends string, Sep extends string> =
  S extends Tpl<infer H, Sep, infer T> ? [H, ...Split<T, Sep>] : [S];
// Tpl<H, Sep, T> = a template literal type matching H, then Sep, then T

type Segs = Split<'users/:id', '/'>; // ['users', ':id']

การเวียนเกิดโดยตรงด้วยแม่แบบ

เรายังสามารถแยกวิเคราะห์สตริงดิบได้โดยไม่ต้องแยกก่อน ด้วยการจับคู่ทีละส่วน จับคู่ไปจนถึง "/" ถัดไป จัดการส่วนนั้น แล้วเรียกซ้ำกับส่วนที่เหลือ

type ParseRoute<S extends string> =
  S extends Tpl<infer Seg, '/', infer Rest>
    ? SegParam<Seg> & ParseRoute<Rest>
    : SegParam<S>;
// Tpl<Seg, '/', Rest> matches a segment, a slash, then the rest

พารามิเตอร์รายส่วน

ตัวช่วยจะแปลงส่วนเดียวให้เป็นออบเจ็กต์ที่มีคุณสมบัติหนึ่งรายการ หากส่วนนั้นเป็นพารามิเตอร์ หรือเป็นออบเจ็กต์ว่าง หากส่วนนั้นเป็นค่าลิเทอรัล

type SegParam<S extends string> =
  S extends Tpl<':', infer Name> ? { [K in Name]: string } : {};
// Tpl<':', Name> matches a colon followed by the param name

type X = SegParam<':id'>;   // { id: string }
type Y = SegParam<'posts'>; // {}

การรวมด้วยอินเตอร์เซกชัน

แต่ละส่วนจะเพิ่มพารามิเตอร์ของตนผ่านอินเตอร์เซกชัน ออบเจ็กต์ว่างจะไม่ส่งผลในอินเตอร์เซกชัน ดังนั้นจึงเหลือเฉพาะพารามิเตอร์จริงในชนิดข้อมูลสุดท้าย

type Params = ParseRoute<"users/:id/posts/:postId">;
// { id: string } & {} & { postId: string } & {}
// = { id: string; postId: string }

ติดตามการแยกวิเคราะห์

สำหรับ "users/:id/posts/:postId":

ส่วน "users" -> {} แล้วเรียกซ้ำกับ ":id/posts/:postId"
ส่วน ":id" -> { id: string } แล้วเรียกซ้ำกับ "posts/:postId"
ส่วน "posts" -> {} แล้วเรียกซ้ำกับ ":postId"
ส่วน ":postId" -> { postId: string } ซึ่งเป็นกรณีฐาน

type Final = { id: string } & { postId: string };

การจัดผลลัพธ์ให้เรียบร้อย

อินเตอร์เซกชันของออบเจ็กต์แสดงผลได้ไม่สะดวก ตัวช่วยสำหรับจัดรูปแบบจะทำให้ผลลัพธ์แบนลงเป็นชนิดออบเจ็กต์เดียวที่อ่านง่าย โดยใช้ชนิดแบบแมปเหนือคีย์ของออบเจ็กต์

type Prettify<T> = { [K in keyof T]: T[K] } & {};

type Clean = Prettify<ParseRoute<"users/:id">>; // { id: string }

การใช้ตัวแยกวิเคราะห์

นำชนิดข้อมูลที่แยกวิเคราะห์ได้ไปใส่ในฟังก์ชัน เพื่อให้ตัวจัดการได้รับพารามิเตอร์ที่มีชนิดข้อมูลถูกต้อง การส่งคีย์ผิดจะกลายเป็นข้อผิดพลาดระหว่างการคอมไพล์

declare function route<P extends string>(
  path: P,
  handler: (params: Prettify<ParseRoute<P>>) => void
): void;

route("users/:id", p => { const id: string = p.id; });

ประโยชน์ของพารามิเตอร์ที่มีชนิดข้อมูล

ตอนนี้คอมไพเลอร์อนุมาน params จากสตริงเส้นทางโดยตรง หากเปลี่ยนชื่อพารามิเตอร์ในเส้นทาง ตัวจัดการทุกตัวจะปรับคีย์ที่คาดหวังให้โดยอัตโนมัติ ไม่ต้องเขียนส่วนติดต่อขึ้นเอง และไม่มีความคลาดเคลื่อนระหว่างเส้นทางกับตัวจัดการ

route("users/:userId", p => {
  const u = p.userId; // ok
  // const x = p.id; // error: id does not exist
});

การขยายตัวแยกวิเคราะห์

ตัวแยกวิเคราะห์ขนาดเล็กนี้เป็นจุดเริ่มต้นของตัวกำหนดเส้นทางที่มีชนิดข้อมูลครบถ้วน คุณสามารถเพิ่มค่าที่มีชนิดข้อมูล เช่น พารามิเตอร์ตัวเลข อักขระแทนที่ได้ทุกค่า และส่วนที่ไม่บังคับ โดยเพิ่มรูปแบบแม่แบบให้กับตัวช่วยรายส่วน โครงสร้างแม่แบบแบบเวียนเกิดยังคงเหมือนเดิม

type SegParam2<S extends string> =
  S extends Tpl<':', infer N, '(number)'> ? { [K in N]: number }
  : S extends Tpl<':', infer N> ? { [K in N]: string }
  : {};
// Tpl<...> stands for a backtick template literal type pattern

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจของคุณเกี่ยวกับตัวแยกวิเคราะห์เส้นทาง

สรุปทบทวน

คุณได้สร้างตัวแยกวิเคราะห์เส้นทางระหว่างการคอมไพล์

จับคู่แต่ละส่วนด้วยการอนุมานลิเทอรัลแม่แบบแบบเวียนเกิด
ส่วนพารามิเตอร์ (:name) จะกลายเป็น { name: string }
ส่วนที่เป็นค่าลิเทอรัลจะกลายเป็น {} และไม่ส่งผลในอินเตอร์เซกชัน
Prettify จะทำให้ผลลัพธ์แบนลงเป็นพารามิเตอร์ที่อ่านง่าย

ถัดไปในหลักสูตรที่ 25: ความปลอดภัยของชนิดข้อมูลตั้งแต่ต้นทางถึงปลายทางด้วย tRPC

คำถามที่พบบ่อย

บทเรียน “ตัวแยกวิเคราะห์เส้นทางระดับชนิดข้อมูลฉบับย่อ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ตัวแยกวิเคราะห์เส้นทางระดับชนิดข้อมูลฉบับย่อ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ตัวแยกวิเคราะห์เส้นทางระดับชนิดข้อมูลฉบับย่อ”

แยกวิเคราะห์เส้นทางเราเตอร์เป็นออบเจ็กต์พารามิเตอร์ที่มีชนิดข้อมูล คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “ตัวแยกวิเคราะห์เส้นทางระดับชนิดข้อมูลฉบับย่อ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

แนวคิดตัวประกอบการแยกวิเคราะห์
การแยกสตริงระดับชนิดข้อมูล
การแยกวิเคราะห์ด้วยสตริงแบบแม่แบบ
ตัวแยกวิเคราะห์เส้นทางระดับชนิดข้อมูลฉบับย่อ

← กลับไปที่ TypeScript Academy