ยูทิลิตี Flatten และ UnwrapPromise
เขียนชนิดที่คลายโครงสร้างเจเนอริกที่ซ้อนกัน
ยูทิลิตี Flatten และ UnwrapPromise เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
ปัญหาการทำให้แบน
อาร์เรย์ JavaScript สามารถซ้อนกันได้ ชนิดยูทิลิตี Flatten จะลบตัวห่ออาร์เรย์ออกจากชนิดแบบเรียกซ้ำ และส่งคืนชนิดของสมาชิกชั้นในสุด
type Flatten<T> = T extends (infer U)[] ? Flatten<U> : T;
type A = Flatten<number[][][]>; // number
type B = Flatten<string[]>; // stringการทำให้แบนแบบไม่เรียกซ้ำ (หนึ่งระดับ)
การทำให้แบนหนึ่งระดับสอดคล้องกับ Array.prototype.flat(1) โดยแกะการซ้อนออกเพียงหนึ่งระดับเท่านั้น
type FlatOnce<T> = T extends (infer U)[] ? U : T;
type A = FlatOnce<number[][]>; // number[]
type B = FlatOnce<string[]>; // stringการทำให้แบนแบบเรียกซ้ำ
เวอร์ชันแบบเรียกซ้ำเลียนแบบ Array.prototype.flat(Infinity) โดยเรียกซ้ำจนไม่เหลือตัวห่ออาร์เรย์อีก
type Flatten<T> = T extends (infer U)[] ? Flatten<U> : T;
type C = Flatten<boolean[][][]>; // booleanUnwrapPromise: หนึ่งระดับ
แกะชั้น Promise หนึ่งชั้นโดยใช้การอนุมาน
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
type D = UnwrapPromise<Promise<string>>; // string
type E = UnwrapPromise<number>; // numberUnwrapPromise แบบลึก
แกะพรอมิสที่ซ้อนกันแบบเรียกซ้ำ ซึ่งเทียบเท่ากับ Awaited ในตัว
type DeepUnwrap<T> = T extends Promise<infer U> ? DeepUnwrap<U> : T;
type F = DeepUnwrap<Promise<Promise<number>>>; // numberการผสาน Flatten และ UnwrapPromise
ชนิดที่ผสานกันจะจัดการทั้งพรอมิสและอาร์เรย์ จึงมีประโยชน์สำหรับฟังก์ชันแบบไม่พร้อมกันที่ส่งคืนอาร์เรย์
type Simplify<T> =
T extends Promise<infer U> ? Simplify<U>
: T extends (infer V)[] ? Simplify<V>
: T;
type G = Simplify<Promise<string[][]>>; // stringAwaited<T> ในตัว
TypeScript 4.5 ขึ้นไปมี Awaited ซึ่งแกะชนิดที่ทำงานเสมือนพรอมิสแบบเรียกซ้ำ รวมถึงชนิดที่ทำงานเสมือนพรอมิสแต่ไม่ใช่พรอมิสด้วย
type H = Awaited<Promise<Promise<string>>>; // string
// Also handles custom thenables with .then()การแกะค่าของแมป
รูปแบบการอนุมานเดียวกันนี้ใช้แยกชนิดค่าจาก Map
type MapValue<T> = T extends Map<any, infer V> ? V : never;
type I = MapValue<Map<string, number[]>>; // number[]FlattenObject: การผสานอินเทอร์เฟซที่ซ้อนกัน
ตัวทำให้โครงสร้างออบเจ็กต์แบนในระดับชนิดจะผสานชนิดออบเจ็กต์ที่ซ้อนกัน ซึ่งซับซ้อนกว่าแต่มีประโยชน์สำหรับการผสานการกำหนดค่าแบบลึก
// This requires recursive mapped types + intersection spreading
// See the DeepPartial lesson for the base patternการใช้งานจริง: การแกะห่อการตอบกลับของส่วนติดต่อการเขียนโปรแกรมประยุกต์
แกะห่อการตอบกลับของส่วนติดต่อการเขียนโปรแกรมประยุกต์ที่ซ้อนกัน เพื่อให้ได้ชนิดข้อมูลโดยไม่ต้องเขียนการยืนยันชนิดด้วยตนเอง
type ApiData<T> = { data: T; status: number };
type ExtractData<T> = T extends ApiData<infer D> ? D : T;
type J = ExtractData<ApiData<User[]>>; // User[]ทบทวน: การทำให้แบนและการแกะห่อ
Flatten และ UnwrapPromise ใช้ชนิดมีเงื่อนไขแบบเรียกซ้ำร่วมกับ infer เพื่อลอกตัวห่อชนิดออก ใช้ Awaited สำหรับการแกะพรอมิส และเขียนการเรียกซ้ำแบบกำหนดเองสำหรับโครงสร้างอื่น
ตรวจสอบความเข้าใจ
Flatten ส่งคืนอะไร
สิ่งที่ได้เรียนรู้
Flatten และ UnwrapPromise เป็นชนิดมีเงื่อนไขแบบเรียกซ้ำที่ลอกตัวห่อแบบทั่วไปออก ผสานทั้งสองชนิดเพื่อทำให้ชนิดที่ซ้อนกันซับซ้อนเรียบง่ายขึ้น และใช้ Awaited ในตัวสำหรับสายโซ่พรอมิส
เรียนรู้ TypeScript ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 101
- บทเรียน
- 352
คำถามที่พบบ่อย
บทเรียน “ยูทิลิตี Flatten และ UnwrapPromise” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ยูทิลิตี Flatten และ UnwrapPromise” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ยูทิลิตี Flatten และ UnwrapPromise”
เขียนชนิดที่คลายโครงสร้างเจเนอริกที่ซ้อนกัน คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ยูทิลิตี Flatten และ UnwrapPromise” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- DeepPartial และ DeepReadonly
- ยูทิลิตี Flatten และ UnwrapPromise
- TupleToUnion และ UnionToIntersection
- การเผยแพร่ไลบรารีอรรถประโยชน์ด้านชนิด