TypeScript Academy · Pelajaran

Parser Rute Mini Tingkat Jenis

Urai jalur rute menjadi objek parameter bertipe.

Pelajaran 4 dari 413 langkah

Parser Rute Mini Tingkat Jenis adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Tujuannya

Kita membangun pengurai rute yang membaca jalur seperti "users/:id/posts/:postId" dan menghasilkan objek parameter bertipe { id: string; postId: string }, sepenuhnya pada waktu kompilasi. Ini adalah pola nyata yang digunakan oleh perute bertipe.

type Params = ParseRoute<"users/:id/posts/:postId">;
// Goal: { id: string; postId: string }

Mengenali Parameter

Segmen jalur merupakan parameter jika diawali dengan ":". Kita mencocokkan awalan tersebut dengan literal templat dan menyimpulkan nama parameter setelah titik dua.

Notasi: TypeScript nyata menulis tipe literal templat menggunakan string yang dibatasi tanda kutip terbalik dan berisi celah dolar-kurung kurawal. Dalam cuplikan ini, kami menampilkan pola tersebut sebagai Tpl<...>, dengan mencantumkan setiap bagian secara berurutan; misalnya, templat tanda kutip terbalik yang mencocokkan awalan literal lalu Rest ditampilkan sebagai Tpl<'prefix', infer Rest>.

type ParamName<S> = S extends Tpl<':', infer Name> ? Name : never;
// Tpl<...> denotes a backtick template literal type: a colon then Name

type X = ParamName<':id'>;   // 'id'
type Y = ParamName<'users'>; // never

Memisahkan Jalur

Pertama, pisahkan rute menjadi beberapa segmen pada "/" dengan menggunakan kembali tipe Split. Setiap segmen kemudian berupa literal atau parameter.

type Split<S extends string, Sep extends string> =
  S extends Tpl<infer H, Sep, infer T> ? [H, ...Split<T, Sep>] : [S];
// Tpl<H, Sep, T> = a template literal type matching H, then Sep, then T

type Segs = Split<'users/:id', '/'>; // ['users', ':id']

Rekursi Templat Langsung

Kita juga dapat mengurai string mentah tanpa memisahkannya terlebih dahulu, dengan mencocokkan satu segmen setiap kali. Cocokkan hingga "/" berikutnya, tangani segmen tersebut, lalu lakukan rekursi pada sisanya.

type ParseRoute<S extends string> =
  S extends Tpl<infer Seg, '/', infer Rest>
    ? SegParam<Seg> & ParseRoute<Rest>
    : SegParam<S>;
// Tpl<Seg, '/', Rest> matches a segment, a slash, then the rest

Parameter per Segmen

Pembantu tersebut mengubah satu segmen menjadi objek dengan satu properti jika segmen itu merupakan parameter, atau objek kosong jika segmen itu merupakan literal.

type SegParam<S extends string> =
  S extends Tpl<':', infer Name> ? { [K in Name]: string } : {};
// Tpl<':', Name> matches a colon followed by the param name

type X = SegParam<':id'>;   // { id: string }
type Y = SegParam<'posts'>; // {}

Menggabungkan dengan Interseksi

Setiap segmen menyumbangkan parameternya melalui interseksi. Objek kosong menghilang dalam interseksi, sehingga hanya parameter nyata yang tersisa pada tipe akhir.

type Params = ParseRoute<"users/:id/posts/:postId">;
// { id: string } & {} & { postId: string } & {}
// = { id: string; postId: string }

Menelusuri Penguraian

Untuk "users/:id/posts/:postId":

Segmen "users" -> {} , lakukan rekursi pada ":id/posts/:postId"
Segmen ":id" -> { id: string }, lakukan rekursi pada "posts/:postId"
Segmen "posts" -> {}, lakukan rekursi pada ":postId"
Segmen ":postId" -> { postId: string }, kasus dasar

type Final = { id: string } & { postId: string };

Membersihkan Hasil

Interseksi objek ditampilkan dengan cara yang kurang rapi. Pembantu "perapian" meratakannya menjadi satu tipe objek yang bersih menggunakan tipe pemetaan atas kunci-kuncinya.

type Prettify<T> = { [K in keyof T]: T[K] } & {};

type Clean = Prettify<ParseRoute<"users/:id">>; // { id: string }

Menggunakan Pengurai

Masukkan tipe yang telah diurai ke dalam sebuah fungsi agar penangan menerima parameter dengan tipe yang benar. Penggunaan kunci yang salah akan menjadi kesalahan kompilasi.

declare function route<P extends string>(
  path: P,
  handler: (params: Prettify<ParseRoute<P>>) => void
): void;

route("users/:id", p => { const id: string = p.id; });

Manfaat Parameter Bertipe

Kompiler kini menurunkan params langsung dari string rute. Jika Anda mengganti nama parameter pada jalur, setiap penangan akan otomatis memperbarui kunci yang diharapkannya. Tidak ada antarmuka manual dan tidak ada ketidaksinkronan antara rute dan penangan.

route("users/:userId", p => {
  const u = p.userId; // ok
  // const x = p.id; // error: id does not exist
});

Memperluas Pengurai

Pengurai mini ini merupakan awal dari perute bertipe lengkap. Anda dapat menambahkan nilai bertipe, seperti parameter angka, karakter pengganti, dan segmen opsional, semuanya dengan memperkaya pembantu per segmen menggunakan lebih banyak pola templat. Struktur templat rekursifnya tetap sama.

type SegParam2<S extends string> =
  S extends Tpl<':', infer N, '(number)'> ? { [K in N]: number }
  : S extends Tpl<':', infer N> ? { [K in N]: string }
  : {};
// Tpl<...> stands for a backtick template literal type pattern

Uji Cepat

Uji pemahaman Anda tentang pengurai rute.

Jawab di pelajaran interaktif

Rangkuman

Anda telah membangun pengurai rute pada waktu kompilasi.

Cocokkan setiap segmen dengan inferensi literal templat rekursif.
Segmen parameter (:name) menjadi { name: string }.
Segmen literal menjadi {} dan menghilang dalam interseksi.
Prettify meratakan hasilnya menjadi parameter yang bersih.

Kursus 25 berikutnya: keamanan tipe ujung ke ujung dengan tRPC.

Gratis untuk memulai

Belajar TypeScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 101
Pelajaran: 352

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Parser Rute Mini Tingkat Jenis” gratis?

Ya — teks lengkap “Parser Rute Mini Tingkat Jenis” 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 “Parser Rute Mini Tingkat Jenis”?

Urai jalur rute menjadi objek parameter bertipe. 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 4 dari 4.

Berapa lama pelajaran “Parser Rute Mini Tingkat Jenis” 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