TypeScript Academy · Pelajaran

Dasar-Dasar Jenis Literal Templat

Bangun jenis string dari union dan placeholder.

Dasar-Dasar Jenis Literal Templat adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Teks pada Tingkat Tipe

Tipe literal templat membangun tipe literal teks baru dengan menggabungkan tipe teks lain. Tipe ini menggunakan sintaks tanda centang terbalik dan tempat pengganti yang sama seperti string templat saat waktu eksekusi, tetapi beroperasi murni pada tipe.

Tipe Literal Templat Sederhana

Bayangkan alias tipe Greeting yang didefinisikan sebagai literal templat berisi teks Hello, yang diikuti tempat pengganti untuk tipe Name. Jika Name adalah literal 'Ada', maka Greeting adalah tipe literal 'Hello, Ada'.

type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)

Tempat Pengganti Menyisipkan Tipe Lain

Di dalam tempat pengganti, Anda dapat menempatkan tipe apa pun yang menyerupai teks: literal, parameter tipe, atau gabungan. TypeScript menggantikannya ke dalam teks di sekitarnya untuk membentuk tipe literal baru.

type World = "World"
// A template literal type with text Hello,  and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)

Menggabungkan Gabungan Menggandakan Varian

Saat sebuah tempat pengganti berisi gabungan, templat diperluas ke setiap anggotanya. Templat yang menggabungkan 'a' | 'b' dengan akhiran tetap menghasilkan gabungan setiap kombinasi.

type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)

Beberapa Tempat Pengganti Membentuk Perkalian Silang

Dua tempat pengganti yang berisi gabungan membentuk perkalian silang. Penggabungan ukuran 'sm' | 'lg' dengan colors 'red' | 'blue' melalui pemisah menghasilkan empat tipe literal.

type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)

Mengapa Ini Berguna

Tipe literal templat memungkinkan Anda menjelaskan kelompok teks secara tepat — nama kelas CSS, nama acara, dan jalur rute — sehingga kompilator menolak teks yang tidak sesuai sebelum waktu eksekusi.

type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)

Angka dan Boolean Dikonversi

Tipe non-teks yang ditempatkan dalam tipe literal templat dikonversi ke bentuk teksnya. Literal angka 42 menjadi teks 42 dalam tipe teks yang dihasilkan.

type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)

Menggunakan Tempat Pengganti Generik

Fungsi generik dapat membangun tipe kembalian literal templat dari tipe literal argumennya, sehingga teks yang tepat diketahui di setiap lokasi pemanggilan.

function prefixed<T extends string>(s: T) {
  return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-home

Membatasi Masukan

Anda dapat mewajibkan agar suatu nilai sesuai dengan tipe literal templat. Hanya teks yang cocok dengan pola yang dijelaskan yang diterima, sehingga kesalahan ketik terdeteksi pada waktu kompilasi.

type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignable

Tipe string Lebar Merusak Pola

Jika tempat pengganti berupa tipe string umum, bukan literal, seluruh templat berubah menjadi string. Kekhususan memerlukan masukan literal, sering kali melalui as const.

const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)

Tempat Menggunakannya

Tipe literal templat ideal digunakan di mana pun teks mengikuti suatu struktur: kelas utilitas CSS, pengenal berawalan, kunci kueri, dan nama acara. Tipe ini mengubah konvensi teks menjadi kontrak yang diperiksa kompilator.

type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)

Uji Singkat

Uji pemahaman Anda tentang dasar-dasar tipe literal templat.

Ringkasan

Tipe literal templat membangun tipe literal teks dengan menyisipkan tempat pengganti ke dalam teks di sekitarnya. Tempat pengganti berupa gabungan diperluas menjadi setiap kombinasi, dan beberapa gabungan membentuk perkalian silang. Literal non-teks dikonversi ke bentuk teksnya. Tempat pengganti string umum mengubah hasil menjadi string, sehingga masukan literal, sering kali melalui as const, diperlukan untuk mendapatkan tipe yang tepat. Tipe ini membuat konvensi teks diperiksa oleh kompilator.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar-Dasar Jenis Literal Templat” gratis?

Ya — teks lengkap “Dasar-Dasar Jenis Literal Templat” 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 “Dasar-Dasar Jenis Literal Templat”?

Bangun jenis string dari union dan placeholder. 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 1 dari 4.

Berapa lama pelajaran “Dasar-Dasar Jenis Literal Templat” 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