TypeScript Academy · บทเรียน

กรณีใช้งาน infer ในทางปฏิบัติ: การคลายห่อ Promise

คลายห่อชนิด Promise, Array และตัวห่อหุ้มแบบกำหนดเอง

บทเรียน 4 จาก 413 ขั้นตอน

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

ปัญหาการแกะตัวห่อหุ้ม

เมื่อทำงานกับโค้ดแบบอะซิงก์ คุณมักได้รับ Promise และต้องการค่า T ที่อยู่ภายใน คีย์เวิร์ด infer ทำให้การแยกค่านี้นำกลับมาใช้ซ้ำได้

type Awaited<T> = T extends Promise<infer U> ? U : T;
type A = Awaited<Promise<string>>; // string
type B = Awaited<number>;          // number

ชนิดข้อมูลอรรถประโยชน์ Awaited ในตัว

TypeScript 4.5 เพิ่ม Awaited ที่มีมาให้ในตัว ซึ่งจัดการพรอมิสที่ซ้อนกันแบบเวียนเกิด

type A = Awaited<Promise<Promise<string>>>; // string
// Handles arbitrary nesting automatically

การแกะตัวห่อหุ้มด้วยความลึกที่กำหนดเอง

ก่อนที่ Awaited จะมีมาให้ในตัว นักพัฒนาใช้ชนิดข้อมูลแบบเวียนเกิดร่วมกับ infer เพื่อแกะพรอมิส

type DeepAwaited<T> =
  T extends Promise<infer U> ? DeepAwaited<U> : T;
type A = DeepAwaited<Promise<Promise<number>>>; // number

การแกะสมาชิกอาร์เรย์

รูปแบบ infer เดียวกันนี้ใช้แยกชนิดข้อมูลสมาชิกจากอาร์เรย์ได้ ซึ่งเทียบเท่ากับแนวทาง T[number] ที่มีมาให้ในตัว

type Element<T> = T extends (infer U)[] ? U : never;
type A = Element<string[]>; // string
type B = Element<number[]>; // number

การแกะชนิดข้อมูล Observable

สำหรับ Observable ของ RxJS การอนุมานจะแยกชนิดข้อมูลที่ถูกส่งออกมา

type ObservableType<T> = T extends Observable<infer U> ? U : never;
type A = ObservableType<Observable<User>>; // User

การแกะผลลัพธ์ของฟังก์ชัน

รวม ReturnType และ Awaited เพื่อรับชนิดข้อมูลค่าที่ได้รับการแก้ไขแล้วของฟังก์ชันแบบอะซิงก์

async function getUser(): Promise<User> { /* ... */ }
type UserResult = Awaited<ReturnType<typeof getUser>>; // User

การแกะตัวห่อหุ้มที่ซ้อนกัน

คุณสามารถเชื่อมการอนุมานเพื่อจัดการชนิดข้อมูลที่ถูกห่อหุ้มไว้หลายชั้น เช่น Promise>

type UnwrapPromiseArray<T> =
  T extends Promise<infer U>
    ? U extends (infer V)[]
      ? V
      : U
    : T;
type A = UnwrapPromiseArray<Promise<User[]>>; // User

การแกะตัวห่อหุ้มตามรูปแบบแบบมีเงื่อนไข

ใช้การอนุมานเพื่อแกะเฉพาะชนิดข้อมูลบางชนิดตามเงื่อนไข โดยคงชนิดข้อมูลอื่นไว้ไม่เปลี่ยนแปลง

type MaybeUnwrap<T> =
  T extends Promise<infer U> ? U : T extends (infer V)[] ? V : T;

type A = MaybeUnwrap<Promise<string>>;  // string
type B = MaybeUnwrap<number[]>;         // number
type C = MaybeUnwrap<boolean>;          // boolean

ตัวห่อหุ้มการดึงข้อมูล API แบบมีชนิดข้อมูล

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

async function fetchData<T>(url: string): Promise<T> {
  const res = await fetch(url);
  return res.json() as T;
}
type UserData = Awaited<ReturnType<typeof fetchData<User>>>; // User

การแกะตัวห่อหุ้มอย่างปลอดภัยจากข้อผิดพลาด

รูปแบบ Result เมื่อใช้ร่วมกับการอนุมาน ช่วยให้คุณแยกชนิดข้อมูลความสำเร็จจากยูเนียนที่จำแนกด้วยตัวระบุได้

type Ok<T> = { ok: true; value: T };
type Err = { ok: false; error: string };
type ExtractOk<T> = T extends Ok<infer V> ? V : never;
type A = ExtractOk<Ok<number> | Err>; // number

สรุป: การแกะตัวห่อหุ้มด้วย infer

คีย์เวิร์ด infer เป็นเครื่องมือสารพัดประโยชน์สำหรับแยกชนิดข้อมูลจากตัวห่อหุ้ม ไม่ว่าจะเป็นพรอมิส อาร์เรย์ Observable หรือชนิดข้อมูล Result ส่วน Awaited ที่มีมาให้ในตัวจะจัดการการแกะตัวห่อหุ้มแบบอะซิงก์ ส่วนโครงสร้างอื่นให้ใช้ชนิดข้อมูลที่กำหนดเอง

ตรวจสอบอย่างรวดเร็ว

วิธีที่ดีที่สุดในการรับชนิดข้อมูลค่าที่ได้รับการแก้ไขแล้วของฟังก์ชันแบบอะซิงก์คืออะไร

สิ่งที่คุณได้เรียนรู้

การแกะตัวห่อหุ้มด้วย infer เป็นเครื่องมือที่ใช้ได้จริงสำหรับโค้ด TypeScript แบบอะซิงก์ ใช้ Awaited ที่มีมาให้ในตัวกับพรอมิส และสร้างชนิดข้อมูลสำหรับแกะตัวห่อหุ้มที่กำหนดเองสำหรับอาร์เรย์ Observable และรูปแบบ Result

เริ่มต้นได้ฟรี

เรียนรู้ TypeScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
101
บทเรียน
352

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

บทเรียน “กรณีใช้งาน infer ในทางปฏิบัติ: การคลายห่อ Promise” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “กรณีใช้งาน infer ในทางปฏิบัติ: การคลายห่อ Promise”

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

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

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

บทเรียน “กรณีใช้งาน infer ในทางปฏิบัติ: การคลายห่อ Promise” ใช้เวลานานแค่ไหน

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

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

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

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

  1. ทำความเข้าใจ infer ในชนิดแบบมีเงื่อนไข
  2. สร้าง ReturnType และ Parameters ตั้งแต่ต้น
  3. รูปแบบการอนุมานชนิดที่ซ้อนกันลึก
  4. กรณีใช้งาน infer ในทางปฏิบัติ: การคลายห่อ Promise
← กลับไปที่ TypeScript Academy