0Pricing
TypeScript Academy · Pelajaran

Pengetikan pola string (parameter rute, nama peristiwa)

Batasi string dengan tipe literal templat: pola parameter rute, ruang nama nama peristiwa, dan pembuat yang aman.

Pengetikan pola string (parameter rute, nama peristiwa) adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. 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 3 pelajaran total.

Pengantar

Tujuan: Modelkan format string dalam tipe. Dengan tipe literal templat, Anda dapat menegakkan pola seperti "/users/:id" atau "user:created" sambil mempertahankan DX yang baik.

  • Batasi berdasarkan prefiks atau sufiks
  • Ekstrak bagian-bagian dengan infer
  • Buat pembantu yang aman

Parameter Rute

Buat templat rute sederhana dan simpulkan nama parameternya; gunakan never pada kasus yang tidak mematuhi aturan.

type Route = `/${string}`

type RouteWithParam = `/${string}/:${string}`

type ParamOf<R extends string> = R extends `${string}/:${infer P}` ? P : never

// examples
type A = ParamOf<"/users/:id">      // "id"
type B = ParamOf<"/posts/:slug">    // "slug"

Pembantu Rute Aman

Pembangun aman: Fungsi pembantu menerima templat yang diawali dengan "/"; templat lainnya ditolak saat kompilasi.

type Path<R extends string> = R extends `/${string}` ? R : never

function route<R extends Path<R>>(r: R) { return r }

const ok = route("/users/:id")    // ok
// const bad = route("users")      // error: must start with "/"

Ruang Nama Peristiwa

Batasi prefiks (misalnya user:, order:) dan blokir nama bidang yang tidak valid dengan tipe.

type EventName = `user:${string}` | `order:${string}`

function on<E extends EventName>(name: E, cb: (data: unknown) => void) {
  // ... register listener
}

on("user:created", d => {})     // ok
// on("payment:done", d => {})  // error: not an EventName

Memisahkan Peristiwa

Ekstrak dua bagian tersebut dengan infer dan ubah menjadi bidang bertipe; format yang tidak valid tidak akan pernah muncul.

type SplitEvent<E extends string> = E extends `${infer Scope}:${infer Action}` ? { scope: Scope; action: Action } : never

type S = SplitEvent<"user:created">   // { scope: "user"; action: "created" }

type Bad = SplitEvent<"oops">          // never

Kiat

Kiat:

Jaga agar batasan tetap minimal; templat yang terlalu ketat memaksa Anda melakukan refaktor.

Gabungkan aturan di satu tempat dengan fungsi pembangun.

Jangan lupa memetakan string yang mendasarinya ke data unknown dan memvalidasinya saat program berjalan.

Pemeriksaan Ruang Nama

Pemeriksaan singkat: Pola mana yang membatasi nama peristiwa menjadi dua ruang nama?

Ringkasan

Ringkasan: Batasi string bertemplat dengan tipe literal templat; hilangkan bagian dengan infer; buat fungsi pembangun yang aman.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengetikan pola string (parameter rute, nama peristiwa)” gratis?

Ya — teks lengkap “Pengetikan pola string (parameter rute, nama peristiwa)” 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 3 pelajaran total.

Apa yang akan aku pelajari di “Pengetikan pola string (parameter rute, nama peristiwa)”?

Batasi string dengan tipe literal templat: pola parameter rute, ruang nama nama peristiwa, dan pembuat yang aman. 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 3.

Berapa lama pelajaran “Pengetikan pola string (parameter rute, nama peristiwa)” 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. Tipe terpetakan dengan +/-readonly dan +/-?
  2. Pemetaan ulang kunci & tipe literal templat
  3. Pengetikan pola string (parameter rute, nama peristiwa)
← Kembali ke TypeScript Academy