กรณีใช้งาน infer ในทางปฏิบัติ: การคลายห่อ Promise
คลายห่อชนิด Promise, Array และตัวห่อหุ้มแบบกำหนดเอง
กรณีใช้งาน 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ทำความเข้าใจ infer ในชนิดแบบมีเงื่อนไข
- สร้าง ReturnType และ Parameters ตั้งแต่ต้น
- รูปแบบการอนุมานชนิดที่ซ้อนกันลึก
- กรณีใช้งาน infer ในทางปฏิบัติ: การคลายห่อ Promise