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

การแยกวิเคราะห์ด้วยสตริงแบบแม่แบบ

ดึงข้อมูลที่มีโครงสร้างจากสตริงโดยใช้ infer

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

จากการแยกสู่โครงสร้าง

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

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

type KeyValue<S> =
  S extends Tpl<infer K, '=', infer V> ? { key: K; value: V } : never;
// Tpl<K, '=', V> matches K, an equals sign, then V

type X = KeyValue<'name=alice'>; // { key: 'name'; value: 'alice' }

จุดอนุมานหลายจุด

รูปแบบเดียวสามารถจับหลายฟิลด์ได้พร้อมกัน หากต้องการแยกวิเคราะห์ "GET /users" ให้อนุมานวิธีการและเส้นทางภายในเงื่อนไขเดียว

type Request<S> =
  S extends Tpl<infer Method, ' ', infer Path>
    ? { method: Method; path: Path }
    : never;
// Tpl<Method, ' ', Path> matches the method, a space, then the path

type X = Request<'GET /users'>; // { method: 'GET'; path: '/users' }

การจำกัดส่วนที่อนุมานได้

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

type Method = 'GET' | 'POST';
type Parse<S> =
  S extends Tpl<(infer M extends Method), ' ', infer P>
    ? { method: M; path: P }
    : never;
// the inferred M is constrained to Method inside the template pattern

type X = Parse<'POST /x'>; // { method: 'POST'; path: '/x' }

การแยกวิเคราะห์คู่คีย์-ค่า

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

type Pair<S> =
  S extends Tpl<infer K, '=', infer V> ? [K, V] : [S, ''];
// Tpl<K, '=', V> splits a 'key=value' string literal type

type X = Pair<'page=2'>; // ['page', '2']

การสร้างออบเจ็กต์จากคู่

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

type FromPairs<T extends [string, string][]> =
  T extends [[infer K extends string, infer V], ...infer R extends [string, string][]]
    ? { [P in K]: V } & FromPairs<R>
    : {};

type X = FromPairs<[["a", "1"], ["b", "2"]]>; // { a: "1" } & { b: "2" }

การแยกวิเคราะห์สตริงคำค้น

นำทุกอย่างมาประกอบกัน: แยกด้วย "&" แยกวิเคราะห์แต่ละส่วนด้วย "=" แล้วสร้างออบเจ็กต์ ตอนนี้คอมไพเลอร์ทราบคีย์ที่แน่นอนของลิเทอรัลสตริงคำค้นแล้ว

type ParseQuery<S extends string> =
  FromPairs<{ [I in keyof SplitAmp<S>]: Pair<SplitAmp<S>[I] & string> }>;
// where SplitAmp splits on "&" (from previous lesson)

การดึงตัวเลข

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

type IsNumeric<S extends string> =
  S extends Tpl<number> ? true : false;
// Tpl<number> is a template literal type that matches any numeric string

type X = IsNumeric<'42'>; // true
type Y = IsNumeric<'4a'>; // false

ส่วนที่ไม่บังคับ

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

type ParsePath<S> =
  S extends Tpl<infer Base, '?', infer Query>
    ? { base: Base; query: Query }
    : { base: S; query: '' };
// Tpl<Base, '?', Query> matches an optional query after a question mark

type X = ParsePath<'/x?a=1'>; // { base: '/x'; query: 'a=1' }

ช่องว่างและกรณีขอบ

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

type CleanKey<S extends string> = Trim<S>;
// Apply Trim to each inferred segment before using it

เหตุผลที่วิธีนี้ทรงพลัง

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

type Event<S> =
  S extends Tpl<infer Domain, ':', infer Action>
    ? { domain: Domain; action: Action }
    : never;
// Tpl<Domain, ':', Action> matches 'domain:action'
type X = Event<'user:created'>; // { domain: 'user'; action: 'created' }

การประกอบตัวแยกวิเคราะห์

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

// Split -> Pair -> FromPairs is a parser pipeline at the type level

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

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

สรุปทบทวน

คุณได้ดึงข้อมูลที่มีโครงสร้างจากชนิดสตริง

  • จุด infer หลายจุดสามารถจับฟิลด์ที่มีชื่อภายในรูปแบบเดียว
  • ส่วนที่อนุมานได้สามารถจำกัดให้แคบลงด้วย extends แบบแทรกในบรรทัด
  • Split, Pair และ FromPairs สามารถประกอบกันเป็นตัวแยกวิเคราะห์คำค้น
  • Trim และการตรวจสอบตัวเลขช่วยจัดการกรณีขอบ

ถัดไป: ตัวแยกวิเคราะห์เส้นทางฉบับสมบูรณ์ขนาดเล็ก

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

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

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

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

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

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

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

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

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

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

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

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

  1. แนวคิดตัวประกอบการแยกวิเคราะห์
  2. การแยกสตริงระดับชนิดข้อมูล
  3. การแยกวิเคราะห์ด้วยสตริงแบบแม่แบบ
  4. ตัวแยกวิเคราะห์เส้นทางระดับชนิดข้อมูลฉบับย่อ
← กลับไปที่ TypeScript Academy