Tipe Literal Templat
Gabungkan tipe literal string dengan sintaks literal templat untuk menghasilkan tipe seperti nama event, string properti CSS, dan jalur rute API.
Tipe Literal Templat adalah pelajaran Frontend 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu Tipe Literal Templat?
TypeScript dapat membangun tipe string dari literal templat pada tingkat tipe. Jika digabungkan dengan tipe gabungan, Anda dapat menyatakan ribuan string valid tanpa mencantumkannya satu per satu.
Tipe Literal Templat Dasar
Gunakan string yang diapit tanda backtick pada posisi tipe—string tersebut menerima tipe lain sebagai interpolasi.
type Greeting = `Hello, ${string}!`;
const a: Greeting = 'Hello, Alice!'; // OK
const b: Greeting = 'Hi, Alice!'; // ErrorMenggabungkan Tipe Gabungan
Saat Anda melakukan interpolasi pada tipe gabungan, TypeScript membuat hasil kali silang dari semua kombinasi.
type Direction = 'top' | 'right' | 'bottom' | 'left';
type Property = 'margin' | 'padding';
type Side = `${Property}-${Direction}`;
// 'margin-top' | 'margin-right' | ... | 'padding-left' (8 strings)Inferensi Nama Peristiwa
Turunkan nama penangan peristiwa dari nama peristiwa—ini adalah penggunaan klasik di dunia nyata.
type EventName = 'click' | 'focus' | 'blur' | 'change';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur' | 'onChange'
type Handlers = { [K in HandlerName]?: (e: Event) => void };
// { onClick?: ...; onFocus?: ...; onBlur?: ...; onChange?: ... }Tipe Utilitas untuk Manipulasi String
TypeScript menyediakan pembantu bawaan: Uppercase<T>, Lowercase<T>, Capitalize<T>, Uncapitalize<T>.
type Hi = Capitalize<'hello'>; // 'Hello'
type Yell = Uppercase<'hello'>; // 'HELLO'
type Quiet = Lowercase<'HELLO'>; // 'hello'
type Lower = Uncapitalize<'Hi'>; // 'hi'Tipe Properti CSS
Nyatakan tipe string seperti CSS: nilai piksel, warna heksadesimal, dan persentase.
type Px = `${number}px`;
type Hex = `#${string}`;
type Pct = `${number}%`;
type Style = { padding: Px; color: Hex; width: Pct };
const s: Style = { padding: '8px', color: '#fff', width: '50%' }; // OK
const bad: Style = { padding: '8', color: 'white', width: '50' }; // ErrorInferensi dengan Literal Templat
Kata kunci infer dapat mengekstrak bagian dari tipe string—berguna untuk pengurai dan tipe rute.
type ExtractName<T> = T extends `Hello, ${infer Name}!` ? Name : never;
type Result = ExtractName<'Hello, Alice!'>; // 'Alice'Tipe Rute API
Rute API yang aman secara tipe: ekstrak parameter jalur dari pola string.
type PathParams<T extends string> =
T extends `${string}/:${infer Param}/${infer Rest}`
? { [K in Param | keyof PathParams<`/${Rest}`>]: string }
: T extends `${string}/:${infer Param}`
? { [K in Param]: string }
: {};
type P = PathParams<'/users/:userId/posts/:postId'>;
// { userId: string; postId: string }Tipe Saran Kelas Tailwind
Batasi properti string ke nilai sistem desain yang telah dikenal.
type Spacing = 0 | 1 | 2 | 4 | 8 | 16;
type Side = 't' | 'r' | 'b' | 'l';
type TwSpacing = `m${Side}-${Spacing}` | `p${Side}-${Spacing}`;
// 'mt-0' | 'mt-1' | ... | 'pl-16'
function Box(props: { className: TwSpacing }) { /* ... */ }Batasan dan Kinerja Kompilator
Hasil kali silang literal templat dapat berkembang pesat (gabungan 50 × 50 menghasilkan 2500 string). TypeScript tetap dapat dikompilasi, tetapi inferensi menjadi lambat. Pertahankan alfabet tetap kecil.
Membedakan Tipe Literal String
Gunakan literal templat sebagai bentuk pemberian identitas yang lebih ekspresif—tetap berupa string, tetapi memiliki batasan.
Pemeriksaan Singkat
Apa hasil evaluasi type X = `on${Capitalize<'click' | 'focus'>}`?
Rangkuman: Tipe Literal Templat
Bangun tipe string dari literal templat dengan tipe gabungan yang diinterpolasikan. Hasil kali silang berkembang pesat—pertahankan alfabet tetap kecil. Gunakan utilitas untuk mengubah kapitalisasi. Gabungkan dengan kata kunci inferensi untuk mengekstrak bagian string. Tipe ini sangat berguna untuk nama peristiwa, nilai CSS, parameter rute, dan nama kelas sistem desain.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Tipe Literal Templat” gratis?
Ya — teks lengkap “Tipe Literal Templat” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Tipe Literal Templat”?
Gabungkan tipe literal string dengan sintaks literal templat untuk menghasilkan tipe seperti nama event, string properti CSS, dan jalur rute API. Kamu berlatih Frontend 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 Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend 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 “Tipe 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend 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
- Tipe Literal Templat
- Dekorator dan Metadata
- TypeScript dengan React: Generik FC dan Hook
- Mode Ketat dan Menghapus any