TypeScript Academy · บทเรียน

อินเทอร์เฟซแบบต่อเนื่องด้วยชนิดข้อมูล

เชื่อมเมธอดต่อกันพร้อมติดตามสถานะที่สะสมในชนิดข้อมูล

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

ติดตามสิ่งที่กำหนดค่าแล้ว

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

พารามิเตอร์ชนิดสถานะ

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

class Builder<S> {
  // S is a record of keys set so far, e.g. {} or { url: string }
  private data: Record<string, unknown> = {};
}

แต่ละเมธอดเพิ่มคีย์หนึ่งรายการ

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

  set<K extends string, V>(key: K, value: V): Builder<S & Record<K, V>> {
    this.data[key] = value;
    return this as unknown as Builder<S & Record<K, V>>;
  }

เทคนิคการตัดกัน

นิพจน์ S & Record<K, V> จะนำสถานะเดิมมาตัดกับคีย์ใหม่ หลังจากเรียกสองครั้ง ชนิดข้อมูลจะทราบเกี่ยวกับคีย์ทั้งสองอย่างแม่นยำ

type Empty = {};
type AfterUrl = Empty & Record<"url", string>;
type AfterBoth = AfterUrl & Record<"method", string>;
// AfterBoth = { url: string; method: string }

ตัวสร้างแบบต่อเนื่องที่ใช้งานจริง

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

class Req<S> {
  private d: Record<string, unknown> = {};
  url(u: string): Req<S & { url: string }> {
    this.d.url = u; return this as any;
  }
  method(m: string): Req<S & { method: string }> {
    this.d.method = m; return this as any;
  }
}

ชนิดข้อมูลขยายขึ้นเมื่อเรียกต่อกัน

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

const partial = new Req<{}>().url("/x");
// type: Req<{ url: string }>
const full = partial.method("POST");
// type: Req<{ url: string; method: string }>

เหตุใดจึงต้องติดตามสถานะ

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

อ่านโครงสร้างที่สะสม

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

type StateOf<T> = T extends Req<infer S> ? S : never;
type S1 = StateOf<Req<{ url: string }>>; // { url: string }

การทำงานขณะรันยังคงเรียบง่าย

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

const r = new Req<{}>().url("/users").method("GET");
console.log("configured url and method");

สถานะแบบเจเนอิกในฐานะบัญชีรายการ

ลองคิดว่า S เป็นบัญชีรายการของสิ่งที่กำหนดค่าแล้ว เมธอดจะเพิ่มรายการต่าง ๆ และขั้นตอน build สามารถอ่านบัญชีนี้ภายหลังเพื่อตัดสินใจว่าอนุญาตให้สร้างหรือไม่

ข้อแลกเปลี่ยน

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

ตรวจสอบอย่างรวดเร็ว

ตรวจสอบความเข้าใจบทเรียนนี้อย่างรวดเร็ว

ทบทวน

ตัวสร้างแบบต่อเนื่องที่มีชนิดข้อมูลจะเก็บพารามิเตอร์สถานะแบบเจเนอิก S เมธอดกำหนดค่าแต่ละเมธอดจะนำ S มาตัดกับคีย์ใหม่ (S & Record<K, V>) แล้วคืนตัวสร้างที่เฉพาะเจาะจงยิ่งขึ้น ทำให้คอมไพเลอร์มีบัญชีรายการฟิลด์ที่กำหนดค่าไว้อย่างแม่นยำ

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

บทเรียน “อินเทอร์เฟซแบบต่อเนื่องด้วยชนิดข้อมูล” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “อินเทอร์เฟซแบบต่อเนื่องด้วยชนิดข้อมูล”

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

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

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

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

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

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

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

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

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