0Pricing
TypeScript Academy · Pelajaran

Union String dan Pelengkapan Otomatis

Dapatkan pelengkapan otomatis editor untuk nilai string yang diketahui.

Union String dan Pelengkapan Otomatis 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.

Gabungan Menggerakkan Pelengkapan Otomatis

Gabungan literal teks memiliki dua fungsi: membatasi nilai yang diizinkan dan menyediakan pelengkapan otomatis pada penyunting. Namun, terkadang Anda menginginkan saran sekaligus kebebasan untuk memberikan teks apa pun — sebuah trik cerdas dapat menanganinya.

Gabungan Literal Teks Dasar

Deklarasikan gabungan teks yang diizinkan. Penyunting akan menawarkan pilihan-pilihan tersebut, dan nilai yang tidak valid menjadi galat kompilasi.

type Variant = "primary" | "secondary" | "danger"
const v: Variant = "primary"
console.log(v)
// const bad: Variant = "warning" // Error

Pelengkapan Otomatis di Penyunting

Saat parameter berupa gabungan literal teks, mengetik di dalam pemanggilan akan menampilkan anggota yang tepat. Ini adalah salah satu kemudahan TypeScript yang paling disukai.

type Color = "red" | "green" | "blue"
function paint(c: Color) { return c }
console.log(paint("green")) // editor suggests red/green/blue

Keterbatasannya

Gabungan ketat melarang nilai apa pun di luar daftar. Terkadang Anda ingin menyarankan nilai umum sekaligus tetap mengizinkan teks khusus apa pun — gabungan biasa tidak dapat melakukan keduanya.

type Color = "red" | "green"
// You cannot pass "#ff8800" — it is not in the union
function paint(c: Color) { return c }
console.log(paint("red"))

Pelebaran Menghilangkan Saran

Jika Anda cukup menggunakan string, nilai apa pun dapat digunakan, tetapi pelengkapan otomatis hilang sepenuhnya. Anda menukar semua petunjuk dengan fleksibilitas total — bukan pilihan yang ideal.

function paint(c: string) { return c }
console.log(paint("#ff8800")) // works, but no suggestions

Trik string dan Gabungan Literal

Triknya: gabungkan literal Anda dengan string & {}. Literal tetap muncul dalam pelengkapan otomatis, sementara string & {} mengizinkan teks lain apa pun tanpa mengubah gabungan menjadi satu tipe saja.

type Color = "red" | "green" | (string & {})
const a: Color = "red"        // suggested
const b: Color = "#ff8800"    // also allowed
console.log(a, b)

Mengapa string dan Objek Kosong Berfungsi

Biasanya, 'red' | string disederhanakan menjadi hanya string, sehingga literalnya terhapus. Mengiriskan dengan {} menghasilkan tipe yang sedikit berbeda dan tetap dipisahkan oleh TypeScript, sehingga literal tetap tersedia untuk pelengkapan, sementara teks apa pun tetap sesuai.

type A = "red" | string          // collapses to string — no hints
type B = "red" | (string & {})   // keeps "red" as a suggestion
const x: B = "red"
console.log(x)

Pembantu yang Dapat Digunakan Ulang

Bungkus trik tersebut dalam alias generik agar maksudnya jelas dan dapat digunakan ulang di seluruh basis kode Anda.

type LiteralUnion<T extends string> = T | (string & {})
type Size = LiteralUnion<"sm" | "md" | "lg">
const s: Size = "custom-size"
console.log(s)

Menerapkannya pada Fungsi

Gunakan pembantu tersebut dalam antarmuka pemrograman aplikasi untuk memberi pemanggil saran bagi masukan umum sekaligus tetap menerima nilai khusus.

type LiteralUnion<T extends string> = T | (string & {})
function setIcon(name: LiteralUnion<"home" | "search">) { return name }
console.log(setIcon("home"))     // suggested
console.log(setIcon("my-icon")) // allowed

Kapan Menggunakan Trik Ini

Gunakan trik ini saat suatu API memiliki nilai yang sudah dikenal, tetapi harus tetap terbuka: nama ikon, satuan CSS, token tema, dan prasetel kerangka kerja. Untuk kumpulan yang tertutup, pilih gabungan ketat demi keamanan penuh.

type LiteralUnion<T extends string> = T | (string & {})
type Unit = LiteralUnion<"px" | "rem" | "%">
const u: Unit = "vh"
console.log(u)

Pertukaran

Trik ini mempertahankan saran, tetapi mengurangi keamanan — kesalahan ketik dalam teks khusus tidak lagi terdeteksi. Gunakan secara sengaja saat keterbukaan merupakan fitur, bukan sebagai pilihan bawaan.

type LiteralUnion<T extends string> = T | (string & {})
type Status = LiteralUnion<"active" | "inactive">
const s: Status = "actvie" // typo NOT caught — the cost of openness
console.log(s)

Uji Singkat

Uji pemahaman Anda tentang trik pelengkapan otomatis.

Ringkasan

Gabungan literal teks mengaktifkan pelengkapan otomatis penyunting dan membatasi nilai, tetapi gabungan ketat melarang teks khusus, sedangkan string biasa menghilangkan semua petunjuk. Trik T | (string & {}) mempertahankan literal sebagai saran sekaligus menerima teks apa pun. Bungkus trik tersebut sebagai pembantu LiteralUnion<T>, dan gunakan hanya saat keterbukaan memang dimaksudkan — trik ini mengorbankan keamanan dalam mendeteksi kesalahan ketik.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Union String dan Pelengkapan Otomatis” gratis?

Ya — teks lengkap “Union String dan Pelengkapan Otomatis” 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 “Union String dan Pelengkapan Otomatis”?

Dapatkan pelengkapan otomatis editor untuk nilai string yang diketahui. 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 “Union String dan Pelengkapan Otomatis” 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

  1. Dasar-Dasar Jenis Literal Templat
  2. Memodelkan String Terstruktur
  3. Union String dan Pelengkapan Otomatis
  4. Jenis Manipulasi String Intrinsik
← Kembali ke TypeScript Academy