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

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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

  1. T extends U ? X : Y ในการใช้งานจริง
  2. infer สำหรับยูทิลิตีลักษณะ ReturnType
  3. ชนิดข้อมูลในตัว: ReturnType, Parameters, InstanceType และอื่น ๆ
← กลับไปที่ TypeScript Academy