TypeScript Academy · Pelajaran

Utilitas Flatten dan UnwrapPromise

Tulis tipe yang membuka struktur generik bertingkat.

Utilitas Flatten dan UnwrapPromise adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Masalah Flatten

Array JavaScript dapat bertingkat. Tipe utilitas Flatten secara rekursif menghapus pembungkus array dari suatu tipe dan mengembalikan tipe elemen terdalam.

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

Flatten Nonrekursif (Satu Tingkat)

Flatten satu tingkat mencerminkan Array.prototype.flat(1)—fungsi ini membuka tepat satu tingkat penumpukan.

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

Flatten Rekursif

Versi rekursif meniru Array.prototype.flat(Infinity) dengan melakukan rekursi hingga tidak ada lagi pembungkus array.

type Flatten<T> = T extends (infer U)[] ? Flatten<U> : T;
type C = Flatten<boolean[][][]>; // boolean

UnwrapPromise: Satu Tingkat

Buka satu lapisan Promise menggunakan infer.

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

UnwrapPromise Mendalam

Buka promise bertingkat secara rekursif—setara dengan Awaited bawaan.

type DeepUnwrap<T> = T extends Promise<infer U> ? DeepUnwrap<U> : T;
type F = DeepUnwrap<Promise<Promise<number>>>; // number

Menggabungkan Flatten dan UnwrapPromise

Tipe gabungan menangani promise dan array sekaligus, sehingga berguna untuk fungsi asinkron yang mengembalikan array.

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> Bawaan

TypeScript 4.5+ menyediakan Awaited, yang secara rekursif membuka tipe thenable, termasuk thenable yang bukan Promise.

type H = Awaited<Promise<Promise<string>>>; // string
// Also handles custom thenables with .then()

Membuka Nilai Map

Pola infer yang sama mengekstrak tipe nilai dari Map.

type MapValue<T> = T extends Map<any, infer V> ? V : never;
type I = MapValue<Map<string, number[]>>; // number[]

FlattenObject: Menggabungkan Interface Bertingkat

Perata objek pada tingkat tipe menggabungkan tipe objek bertingkat—lebih kompleks, tetapi berguna untuk penggabungan konfigurasi mendalam.

// This requires recursive mapped types + intersection spreading
// See the DeepPartial lesson for the base pattern

Penggunaan Praktis: Membuka Pembungkus Respons API

Buka pembungkus respons API bertingkat untuk mendapatkan tipe data tanpa pernyataan tipe manual.

type ApiData<T> = { data: T; status: number };
type ExtractData<T> = T extends ApiData<infer D> ? D : T;
type J = ExtractData<ApiData<User[]>>; // User[]

Ringkasan: Flatten dan Unwrap

Flatten dan UnwrapPromise menggunakan tipe kondisional rekursif dengan infer untuk mengupas pembungkus tipe. Gunakan Awaited untuk membuka promise dan tulis rekursi khusus untuk struktur lainnya.

Pemeriksaan Singkat

Apa yang dikembalikan oleh Flatten?

Yang Anda Pelajari

Flatten dan UnwrapPromise adalah tipe kondisional rekursif yang mengupas pembungkus generik. Gabungkan keduanya untuk menyederhanakan tipe bertingkat yang kompleks, dan gunakan Awaited bawaan untuk rangkaian promise.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Utilitas Flatten dan UnwrapPromise” gratis?

Ya — teks lengkap “Utilitas Flatten dan UnwrapPromise” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Utilitas Flatten dan UnwrapPromise”?

Tulis tipe yang membuka struktur generik bertingkat. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Utilitas Flatten dan UnwrapPromise” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke TypeScript Academy