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

ชนิดแบบมีเงื่อนไขชนิดกระจาย

ทำความเข้าใจว่าชนิดแบบมีเงื่อนไขกระจายไปยังสมาชิกยูเนียนอย่างไร

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

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

ประเภทแบบมีเงื่อนไขที่กระจายตัวจะใช้ประเภทแบบมีเงื่อนไขกับสมาชิกแต่ละรายการของยูเนียนแยกจากกัน พฤติกรรมอันทรงพลังนี้ช่วยให้แปลงและกรองยูเนียนได้

การกระจายคืออะไร

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

เงื่อนไขสำคัญ

การกระจายจะเกิดขึ้นเฉพาะเมื่อ T เป็นพารามิเตอร์ประเภทเจเนอริกที่ไม่ห่อหุ้ม การห่อ T ไว้ในทูเพิลจะป้องกันการกระจาย
type Bare<T> = T extends string ? 'yes' : 'no';
type Wrapped<T> = [T] extends [string] ? 'yes' : 'no';
type B = Bare<'a' | 'b'>; // 'yes' | 'yes' = 'yes'
type W = Wrapped<'a' | 'b'>; // 'no' — treated as a tuple

การกรองยูเนียนด้วย never

การส่งคืน never จากแขนงเท็จจะกรองสมาชิกของยูเนียนออก
type StringsOnly<T> = T extends string ? T : never;
type S = StringsOnly<string | number | boolean>; // string

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

`Extract` สร้างด้วยประเภทแบบมีเงื่อนไขที่กระจายตัว โดยเก็บสมาชิกที่สามารถกำหนดให้กับ U ได้
type Extract<T, U> = T extends U ? T : never;
type E = Extract<string | number | boolean, string | number>; // string | number

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

`Exclude` นำสมาชิกของยูเนียนที่สามารถกำหนดให้กับ U ได้ออก
type Exclude<T, U> = T extends U ? never : T;
type Ex = Exclude<string | number | boolean, boolean>; // string | number

การกระจายของ ToArray

ใช้ ToArray กับสมาชิกแต่ละรายการของยูเนียนแยกจากกันผ่านการกระจาย
type ToArray<T> = T extends any ? T[] : never;
type R = ToArray<string | number>; // string[] | number[]

กรณีใช้งานเพื่อป้องกันการกระจาย

บางครั้งคุณต้องการถือว่ายูเนียนทั้งหมดเป็นอาร์กิวเมนต์ประเภทเดียว แทนที่จะแจกจ่ายไปยังสมาชิกแต่ละรายการ
type IsUnion<T> = [T] extends [T] ? [T] extends [Exclude<T, T>] ? false : true : false;

ประเภทแมปที่กระจายตัว

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

ประเภทแบบมีเงื่อนไขที่กระจายตัวใน ReturnType

พฤติกรรมการกระจายทำให้ `ReturnType` ทำงานได้อย่างถูกต้องเมื่อ T เป็นยูเนียนของประเภทฟังก์ชัน
type Fn = (() => string) | (() => number);
type R = ReturnType<Fn>; // string | number

การกระจายแบบประเมินทันทีและแบบเลื่อนเวลา

TypeScript เลื่อนการประเมินประเภทแบบมีเงื่อนไขที่มีพารามิเตอร์ประเภทอิสระออกไปจนกว่าจะคลี่คลาย ซึ่งเรียกว่าการประเมินแบบเลื่อนเวลา

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

`type R = (string | number) extends string ? 'yes' : 'no'` มีค่าเป็นอะไรเมื่อ T ไม่ใช่เจเนอริกที่ไม่ห่อหุ้ม

สรุป

ประเภทแบบมีเงื่อนไขที่กระจายตัวจะใช้กับสมาชิกแต่ละรายการของยูเนียนแยกจากกันเมื่อ T เป็นพารามิเตอร์เจเนอริกที่ไม่ห่อหุ้ม พฤติกรรมนี้เป็นพื้นฐานของ Extract, Exclude และการกรองยูเนียนแบบกำหนดเอง ห่อไว้ในทูเพิลเพื่อป้องกันการกระจาย

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

บทเรียน “ชนิดแบบมีเงื่อนไขชนิดกระจาย” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ชนิดแบบมีเงื่อนไขชนิดกระจาย”

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

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

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

บทเรียน “ชนิดแบบมีเงื่อนไขชนิดกระจาย” ใช้เวลานานแค่ไหน

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

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

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

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

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