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

ชนิดแบบมีเงื่อนไข: T extends U ? X : Y

เขียนคำสั่ง if ระดับชนิดด้วยชนิดแบบมีเงื่อนไข

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

ยินดีต้อนรับ

ประเภทแบบมีเงื่อนไขช่วยให้เขียนคำสั่ง if ในระดับประเภทได้ ประเภทเหล่านี้เป็นส่วนสำคัญของระบบประเภทขั้นสูงของ TypeScript และใช้สร้างประเภทเครื่องมือ

ไวยากรณ์พื้นฐาน

เขียน `T extends U ? X : Y` หาก T สามารถกำหนดให้กับ U ได้ ผลลัพธ์คือ X มิฉะนั้นคือ Y
type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false

ประเภทในตัว NonNullable

NonNullable ใช้ประเภทแบบมีเงื่อนไขที่นำ null และ undefined ออกจาก T
type NonNullable<T> = T extends null | undefined ? never : T;
type C = NonNullable<string | null>; // string

ประเภทแบบมีเงื่อนไขกับเจเนอริก

ประเภทแบบมีเงื่อนไขมีประโยชน์มากที่สุดเมื่อใช้ภายในฟังก์ชันเจเนอริกและนามแฝงประเภท
type Flatten<T> = T extends Array<infer I> ? I : T;
type Str = Flatten<string[]>; // string
type Num = Flatten<number>;   // number

ประเภทแบบมีเงื่อนไขซ้อนกัน

สามารถซ้อนประเภทแบบมีเงื่อนไขเพื่อใช้ตรรกะที่ซับซ้อนยิ่งขึ้นได้
type TypeName<T> =
  T extends string ? 'string' :
  T extends number ? 'number' :
  T extends boolean ? 'boolean' :
  'object';

การกระจายเหนือยูเนียน

เมื่อ T เป็นพารามิเตอร์ประเภทที่ไม่ห่อหุ้ม ประเภทแบบมีเงื่อนไขจะกระจายไปยังสมาชิกแต่ละรายการของยูเนียน
type ToArray<T> = T extends any ? T[] : never;
type R = ToArray<string | number>; // string[] | number[]

การป้องกันการกระจาย

ห่อ T ไว้ในทูเพิลเพื่อป้องกันการกระจาย
type NoDistribute<T> = [T] extends [any] ? T[] : never;
type R2 = NoDistribute<string | number>; // (string | number)[]

การใช้ never เพื่อกรอง

การส่งคืน never จากประเภทแบบมีเงื่อนไขจะนำสมาชิกของยูเนียนออก
type OnlyStrings<T> = T extends string ? T : never;
type S = OnlyStrings<'a' | 'b' | 1 | 2>; // 'a' | 'b'

ประเภทแบบมีเงื่อนไขในประเภทแมป

ใช้ประเภทแมปร่วมกับประเภทแบบมีเงื่อนไขเพื่อแปลงคุณสมบัติของออบเจ็กต์แบบเลือกเฉพาะ
type NullableValues<T> = { [K in keyof T]: T[K] extends string ? null : T[K] };

การอนุมานจากพารามิเตอร์ฟังก์ชัน

ใช้ infer ในประเภทแบบมีเงื่อนไขเพื่อแยกส่วนต่าง ๆ ของประเภทที่ซับซ้อน
type FirstParam<T> = T extends (first: infer P, ...rest: any[]) => any ? P : never;
type FP = FirstParam<(a: string, b: number) => void>; // string

เครื่องมือประเภทแบบมีเงื่อนไขในตัว

เครื่องมือในตัวจำนวนมาก เช่น ReturnType, Parameters และ InstanceType สร้างขึ้นด้วยประเภทแบบมีเงื่อนไขและ infer
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

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

ผลลัพธ์ของ `type R = string extends object ? 'yes' : 'no'` คืออะไร

สรุป

ประเภทแบบมีเงื่อนไข (`T extends U ? X : Y`) ช่วยให้ใช้ตรรกะในระดับประเภทได้ ประเภทเหล่านี้กระจายตัวเหนือยูเนียน ทำงานร่วมกับ infer เพื่อแยกข้อมูล และเป็นพื้นฐานของประเภทเครื่องมือในตัวของ TypeScript จำนวนมาก

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

บทเรียน “ชนิดแบบมีเงื่อนไข: T extends U ? X : Y” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ชนิดแบบมีเงื่อนไข: T extends U ? X : Y”

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

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

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

บทเรียน “ชนิดแบบมีเงื่อนไข: T extends U ? X : Y” ใช้เวลานานแค่ไหน

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

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

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

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

  1. keyof และชนิดการเข้าถึงแบบดัชนี
  2. ข้อจำกัดเจเนอริก: การจำกัดพารามิเตอร์ชนิดให้แคบลง
  3. ชนิดแบบมีเงื่อนไข: T extends U ? X : Y
  4. ชนิดแบบมีเงื่อนไขชนิดกระจาย
← กลับไปที่ TypeScript Academy