TypeScript Academy · Pelajaran

Memodelkan String Terstruktur

Terapkan format seperti nama peristiwa dan jalur rute.

Memodelkan String Terstruktur 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.

Menegakkan Format Teks

Banyak teks dalam aplikasi nyata mengikuti suatu struktur: nama penangan acara, jalur rute antarmuka pemrograman aplikasi, dan variabel CSS. Tipe literal templat memungkinkan Anda memodelkan format ini agar kompilator menegakkannya.

Memodelkan Nama Penangan Acara

Nama penangan sering kali berbentuk on ditambah acara yang diawali huruf kapital. Dengan menggunakan pembantu intrinsik Capitalize di dalam templat, acara 'click' dipetakan menjadi nama penangan 'onClick'.

type Event = "click" | "focus"
// template: on followed by Capitalize of Event
// => "onClick" | "onFocus"
const h: "onClick" | "onFocus" = "onClick"
console.log(h)

Mengapa Capitalize Penting di Sini

Tanpa Capitalize, templat akan menghasilkan 'onclick'. Tipe intrinsik tersebut mengubah karakter pertama literal menjadi huruf besar, sehingga menghasilkan nama penangan camelCase yang sesuai kebiasaan.

type E = "scroll"
type Cap = Capitalize<E> // "Scroll"
const c: "Scroll" = "Scroll"
console.log(c)

Menghasilkan Peta Penangan

Gabungkan kunci literal templat dengan tipe terpetakan untuk menghasilkan tipe objek penangan — satu fungsi bertipe untuk setiap acara, dengan nama yang menggunakan kapitalisasi yang benar.

type Events = "click" | "hover"
type Handlers = {
  [E in Events as "on" extends string ? "on" : never]?: () => void
}
// In practice the key uses a template: on + Capitalize<E>
const h: { onClick?: () => void } = {}
console.log(h)

Memodelkan Jalur Rute

Rute antarmuka pemrograman aplikasi memiliki bentuk seperti garis miring di awal, sumber daya, dan segmen pengenal. Templat yang menggabungkan teks tetap dengan tempat pengganti dapat menangkap jalur yang valid.

type Resource = "users" | "posts"
// template: /api/ followed by Resource
// => "/api/users" | "/api/posts"
const path: "/api/users" | "/api/posts" = "/api/users"
console.log(path)

Jalur Berparameter

Tambahkan tempat pengganti untuk pengenal dinamis. Templat berupa garis miring, sumber daya, garis miring, lalu segmen pengenal generik dapat memodelkan jalur seperti jalur pengguna yang diikuti pengenal numerik.

type Id = number
// template: /users/ followed by Id-like segment
function userPath(id: number): string {
  return "/users/" + id
}
console.log(userPath(42)) // /users/42

Menegakkan Format pada Waktu Kompilasi

Dengan mengetikkan parameter sebagai tipe literal templat, Anda menolak teks apa pun yang tidak sesuai dengan struktur tersebut — perlindungan terhadap rute atau kunci yang tidak terbentuk dengan benar.

type Method = "GET" | "POST"
function call(endpoint: "GET /users" | "POST /users") {
  return endpoint
}
console.log(call("GET /users"))
// call("DELETE /users") // Error
console.log("ok")

Menyusun Nama Variabel CSS

Properti khusus CSS mengikuti skema penamaan. Templat dengan dua tanda hubung di awal dan tempat pengganti token dapat memodelkan nama seperti variabel token warna.

type Token = "primary" | "accent"
// template: --color- followed by Token
// => "--color-primary" | "--color-accent"
const v: "--color-primary" | "--color-accent" = "--color-accent"
console.log(v)

Memisahkan dengan Inferensi

Tipe literal templat juga dapat melakukan penguraian: dengan tipe kondisional dan infer, Anda mengekstrak bagian-bagian dari teks terstruktur pada tingkat tipe — misalnya mengambil metode dari teks titik akhir.

type ExtractMethod<S> = S extends "GET /users" ? "GET" : "OTHER"
type M = ExtractMethod<"GET /users"> // "GET"
const m: "GET" = "GET"
console.log(m)

Manfaat di Dunia Nyata

Tipe teks terstruktur menangkap berbagai kelas galat: nama penangan yang salah eja, rute yang tidak dikenal, dan token CSS yang keliru — semuanya menjadi galat kompilasi, bukan kegagalan diam-diam saat waktu eksekusi.

type Tab = "home" | "profile"
// template: tab- followed by Tab => "tab-home" | "tab-profile"
function selectTab(id: "tab-home" | "tab-profile") { return id }
console.log(selectTab("tab-home"))

Pertahankan Keterbacaannya

Meskipun sangat kuat, tipe templat yang bertingkat dalam dapat mengurangi keterbacaan. Beri nama alias tipe perantara agar strukturnya tetap jelas bagi pembaca berikutnya.

type Entity = "user" | "order"
// type EventName = on + Capitalize<Entity> + Created
// e.g. "onUserCreated" | "onOrderCreated"
const e: "onUserCreated" | "onOrderCreated" = "onUserCreated"
console.log(e)

Uji Singkat

Uji pemahaman Anda tentang pemodelan teks terstruktur.

Ringkasan

Tipe literal templat memodelkan teks terstruktur — nama penangan (on + Capitalize dari suatu acara), jalur rute, dan variabel CSS — serta menegakkan format tersebut pada waktu kompilasi. Jika digabungkan dengan tipe terpetakan, tipe ini menghasilkan peta penangan; jika digabungkan dengan tipe kondisional dan infer, tipe ini menguraikan teks. Beri nama alias perantara agar pola yang rumit tetap mudah dibaca.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memodelkan String Terstruktur” gratis?

Ya — teks lengkap “Memodelkan String Terstruktur” 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 “Memodelkan String Terstruktur”?

Terapkan format seperti nama peristiwa dan jalur rute. 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 “Memodelkan String Terstruktur” 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