TypeScript Academy · บทเรียน

การกำหนดตัวสร้างชนิดข้อมูล

เข้ารหัสตัวสร้างชนิดข้อมูลเป็นการค้นหาผ่านอินเทอร์เฟซ

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

การตั้งชื่อตัวสร้างชนิด

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

type ArrayURI = "Array";
type OptionURI = "Option";
// Each container gets a unique string tag

อินเทอร์เฟซรีจิสทรี

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

interface URItoKind<A> {
  Array: Array<A>;
  Option: A | null;
}
// URItoKind<number>["Array"] is number[]

การค้นหาตัวสร้าง

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

type ArrayOfNumber = URItoKind<number>["Array"]; // number[]
type OptionOfString = URItoKind<string>["Option"]; // string | null

ยูเนียน URIS

ชุดแท็กตัวสร้างที่ใช้ได้ก็คือคีย์ของรีจิสทรีนั่นเอง keyof URItoKind<unknown> ให้ยูเนียนของตัวระบุทรัพยากรที่ลงทะเบียนไว้ทั้งหมด ซึ่งเราตั้งชื่อว่า URIS

type URIS = keyof URItoKind<unknown>; // "Array" | "Option"

การรวมการประกาศช่วยขยายรีจิสทรี

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

interface URItoKind<A> {
  Tree: { value: A; children: Array<A> };
}
// Now URIS also includes "Tree"

คอนเทนเนอร์แบบโมดูลาร์

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

// file a.ts
interface URItoKind<A> { Either: { left: A } | { right: A } }
// file b.ts can now reference the "Either" URI

ตัวพาหะเชิงนามธรรม

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

interface HasURI<F extends URIS> {
  readonly _URI: F;
}
// _URI records which constructor an instance is for

การจับคู่ตัวระบุทรัพยากรกับอาร์กิวเมนต์

การใช้ตัวสร้างต้องมีสองสิ่ง: ตัวระบุทรัพยากร F และชนิดอาร์กิวเมนต์ A เราจะรวมทั้งสองสิ่งด้วยการค้นหา เพื่อให้ (F, A) คลี่ออกมาเป็นชนิดรูปธรรมผ่านรีจิสทรี

type Apply<F extends URIS, A> = URItoKind<A>[F];

type A = Apply<"Array", number>;  // number[]
type B = Apply<"Option", string>; // string | null

เหตุผลที่ใช้สตริง ไม่ใช่ตัวสร้าง

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

type Tag = "Array";
type Resolved = URItoKind<boolean>[Tag]; // boolean[]

การค้นหาคือก้าวสำคัญ

การเข้าถึงด้วยดัชนีนี้ URItoKind<A>[F] คือหัวใจของการเข้ารหัส มันเปลี่ยนการใช้ชนิดที่เป็นไปไม่ได้อย่าง F<A> ให้เป็นการค้นหาในรีจิสทรีที่ถูกต้องตามกฎ บทเรียนถัดไปจะทำให้แนวคิดนี้เป็นทางการในชื่อ Kind<F, A>

type Kind<F extends URIS, A> = URItoKind<A>[F];

type X = Kind<"Array", number>; // number[]

ทบทวนการเตรียมระบบ

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

// URItoKind = registry, URIS = valid tags,
// URItoKind<A>[F] = "apply constructor F to A"

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

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

ทบทวน

คุณได้เรียนรู้การเข้ารหัสตัวสร้างชนิดด้วยสตริง

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

ถัดไป: การบรรจุการค้นหาไว้ในรูปแบบ Kind ที่มีน้ำหนักเบา

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

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

ใช่ — ข้อความเต็มของ “การกำหนดตัวสร้างชนิดข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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