T extends U ? X : Y ในการใช้งานจริง
เขียนชนิดข้อมูลแบบมีเงื่อนไขสำหรับการใช้งานจริง เรียนรู้การกระจายบนยูเนียน และวิธีปิดการกระจายเมื่อจำเป็น
T extends U ? X : Y ในการใช้งานจริง เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
บทนำ
เป้าหมาย: ใช้ชนิดข้อมูลแบบมีเงื่อนไขเพื่อแสดงตรรกะในระบบชนิดข้อมูล และทำความเข้าใจว่าชนิดข้อมูลเหล่านี้ กระจาย ไปตามยูเนียนเมื่อใด
- รูปแบบ:
T extends U ? X : Y - การกระจาย: ใช้แต่ละแขนงกับสมาชิกแต่ละตัวของยูเนียน
รูปแบบพื้นฐาน
ชนิดข้อมูลแบบมีเงื่อนไขจะเลือกแขนงตามว่า T สามารถกำหนดค่าให้กับ string ได้หรือไม่
type IsString<T> = T extends string ? true : false
type A = IsString<string>
// ^ true
type B = IsString<number>
// ^ falseการกระจาย
เมื่อใช้ T โดยตรง การตรวจสอบจะทำกับสมาชิกแต่ละตัวของยูเนียน: string | number จะกลายเป็น string[] | number[]
type ToArray<T> = T extends any ? T[] : never
type C = ToArray<string | number>
// distributes:
// C is string[] | number[]ปิดใช้การกระจาย
ห่อ T ไว้ในทูเพิล ([T]) เพื่อป้องกันการกระจาย และปฏิบัติต่อยูเนียนเป็นหนึ่งกลุ่ม
type ToArrayNoDist<T> = [T] extends [any] ? T[] : never
type D = ToArrayNoDist<string | number>
// no distribution:
// D is (string | number)[]ยูทิลิตีในโลกจริง
ตัวอย่างรูปแบบนี้: สำหรับอาร์เรย์ ElementType ใช้การอนุมานชนิดข้อมูลเพื่อดึงชนิดของสมาชิก มิฉะนั้นจะคงชนิดข้อมูลเดิมไว้
type NonEmptyArray<T> = T[] extends [] ? never : T[]
// Usually better:
// type ElementType<T> = T extends ReadonlyArray<infer U> ? U : T
type E1 = ElementType<string[]>
// ^ string
type E2 = ElementType<readonly number[]>
// ^ number
type E3 = ElementType<string>
// ^ stringเคล็ดลับ
เคล็ดลับ: ทำเงื่อนไขให้เรียบง่าย คำนึงถึงการนำไปใช้งาน ใช้ชนิดตัวช่วยซ้ำ และรวมไฟล์การทดสอบสำหรับการผสมรูปแบบที่ซับซ้อน
// Tips
// - Keep conditions simple; deep nesting harms readability
// - Document distribution behavior for teammates
// - Prefer helper aliases (ElementType, Awaited) for reuse
// - Watch for De Morgan like logic when composing unionsการตรวจสอบการกระจาย
ตรวจสอบอย่างรวดเร็ว: ชนิดข้อมูลแบบมีเงื่อนไขจะกระจายเมื่อใด
สรุปทบทวน
สรุปทบทวน: ชนิดข้อมูลแบบมีเงื่อนไขใช้จำลองตรรกะในชนิดข้อมูล การกระจายจะทำกับสมาชิกแต่ละตัวของยูเนียน หากต้องการปิดใช้การกระจาย ให้ห่อด้วยทูเพิล
คำถามที่พบบ่อย
บทเรียน “T extends U ? X : Y ในการใช้งานจริง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “T extends U ? X : Y ในการใช้งานจริง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “T extends U ? X : Y ในการใช้งานจริง”
เขียนชนิดข้อมูลแบบมีเงื่อนไขสำหรับการใช้งานจริง เรียนรู้การกระจายบนยูเนียน และวิธีปิดการกระจายเมื่อจำเป็น คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน
บทเรียน “T extends U ? X : Y ในการใช้งานจริง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- T extends U ? X : Y ในการใช้งานจริง
- infer สำหรับยูทิลิตีลักษณะ ReturnType
- ชนิดข้อมูลในตัว: ReturnType, Parameters, InstanceType และอื่น ๆ