TypeScript Academy · Pelajaran

TupleToUnion dan UnionToIntersection

Konversikan tuple dan union secara terprogram.

TupleToUnion dan UnionToIntersection adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

TupleToUnion: Konsepnya

TupleToUnion mengonversi tipe tuple menjadi union dari tipe elemennya—kebalikan dari membangun tuple dari tipe-tipe individual.

type TupleToUnion<T extends readonly any[]> = T[number];
type A = TupleToUnion<[string, number, boolean]>; // string | number | boolean

Cara Kerja T[number]

Mengindeks tuple dengan number mengakses semua indeks numerik sekaligus, yang dinyatakan TypeScript sebagai union dari tipe elemen.

type Tuple = [string, number, boolean];
type Elements = Tuple[number]; // string | number | boolean

TupleToUnion dengan as const

Gabungkan dengan array as const untuk menurunkan union dari array nilai.

const COLORS = ["red", "green", "blue"] as const;
type Color = typeof COLORS[number]; // "red" | "green" | "blue"

UnionToIntersection: Konsepnya

Mengonversi union menjadi intersection lebih sulit dan memerlukan tipe kondisional distributif dengan tipe fungsi untuk mengumpulkan semua anggota.

type UnionToIntersection<U> =
  (U extends any ? (x: U) => void : never) extends (x: infer I) => void
    ? I
    : never;

Mengapa Trik Fungsi Berhasil

Mendistribusikan ke seluruh anggota union membungkus masing-masing anggota dalam tipe fungsi. Kemudian TypeScript menyimpulkan intersection dari semua tipe parameter untuk memenuhi batasan struktural.

type A = UnionToIntersection<{ a: 1 } | { b: 2 }>;
// { a: 1 } & { b: 2 }

UnionToTuple: Masalah Sulit

Mengonversi union menjadi tuple secara teori memungkinkan, tetapi bergantung pada urutan evaluasi—yang tidak dijamin oleh TypeScript—jadi hindari dalam produksi.

// Not reliable — union member order is unspecified
// Use TupleToUnion (safe) not UnionToTuple (fragile)

Penggunaan Praktis TupleToUnion

Ekstrak semua kunci valid dari tuple literal string untuk membangun tipe union bagi validasi.

const ALLOWED_METHODS = ["GET", "POST", "PUT", "DELETE"] as const;
type HttpMethod = typeof ALLOWED_METHODS[number];
function request(method: HttpMethod) { /* ... */ }

Penggunaan Praktis UnionToIntersection

Gabungkan beberapa interface mixin dari sebuah union menjadi satu tipe gabungan.

type Mixin1 = { log(): void };
type Mixin2 = { save(): Promise<void> };
type Combined = UnionToIntersection<Mixin1 | Mixin2>;
// { log(): void } & { save(): Promise<void> }

Intersection Tipe Primitif

Melakukan intersection pada tipe primitif yang tidak berkaitan menghasilkan never karena tidak ada nilai yang dapat sekaligus menjadi string dan number.

type X = UnionToIntersection<string | number>; // never

Menggunakannya dalam Batasan Generik

Gabungkan TupleToUnion dan UnionToIntersection di dalam batasan generik untuk membangun API yang fleksibel dan aman terhadap tipe.

function merge<T extends object[]>(...args: T): UnionToIntersection<T[number]> {
  return Object.assign({}, ...args) as any;
}

Ringkasan: Tuple ↔ Union ↔ Intersection

TupleToUnion menggunakan pengindeksan T[number]. UnionToIntersection menggunakan trik fungsi distributif dengan infer. Keduanya merupakan alat penting untuk manipulasi tipe tingkat lanjut.

Pemeriksaan Singkat

Apa hasil dari TupleToUnion<[string, number]>?

Yang Anda Pelajari

TupleToUnion menggunakan pengindeksan numerik untuk mengekstrak union elemen dari tuple. UnionToIntersection menggunakan trik fungsi distributif. Pola-pola ini merupakan dasar manipulasi tipe TypeScript tingkat lanjut.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “TupleToUnion dan UnionToIntersection” gratis?

Ya — teks lengkap “TupleToUnion dan UnionToIntersection” 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 “TupleToUnion dan UnionToIntersection”?

Konversikan tuple dan union secara terprogram. 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 3 dari 4.

Berapa lama pelajaran “TupleToUnion dan UnionToIntersection” 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