TypeScript Academy · บทเรียน

ยูทิลิตี Flatten และ UnwrapPromise

เขียนชนิดที่คลายโครงสร้างเจเนอริกที่ซ้อนกัน

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

ยูทิลิตี 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[][][]>; // boolean

UnwrapPromise: หนึ่งระดับ

แกะชั้น Promise หนึ่งชั้นโดยใช้การอนุมาน

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
type D = UnwrapPromise<Promise<string>>; // string
type E = UnwrapPromise<number>;          // number

UnwrapPromise แบบลึก

แกะพรอมิสที่ซ้อนกันแบบเรียกซ้ำ ซึ่งเทียบเท่ากับ 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[][]>>; // string

Awaited<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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

  1. DeepPartial และ DeepReadonly
  2. ยูทิลิตี Flatten และ UnwrapPromise
  3. TupleToUnion และ UnionToIntersection
  4. การเผยแพร่ไลบรารีอรรถประโยชน์ด้านชนิด
← กลับไปที่ TypeScript Academy