TypeScript Academy · Pelajaran

Mengurai dengan Literal Templat

Ekstrak data terstruktur dari string menggunakan infer.

Pelajaran 3 dari 413 langkah

Mengurai dengan Literal Templat adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Dari Pemisahan ke Struktur

Pemisahan menghasilkan tuple berisi beberapa bagian. Penguraian melangkah lebih jauh: mengekstrak data bernama dan terstruktur dari tipe string. Kita menggunakan pola literal templat dengan beberapa variabel infer untuk mengambil bagian yang diperlukan.

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 KeyValue<S> =
  S extends Tpl<infer K, '=', infer V> ? { key: K; value: V } : never;
// Tpl<K, '=', V> matches K, an equals sign, then V

type X = KeyValue<'name=alice'>; // { key: 'name'; value: 'alice' }

Beberapa Titik Inferensi

Satu pola dapat menangkap beberapa bidang sekaligus. Untuk mengurai "GET /users", simpulkan metode dan jalurnya dalam satu kondisi.

type Request<S> =
  S extends Tpl<infer Method, ' ', infer Path>
    ? { method: Method; path: Path }
    : never;
// Tpl<Method, ' ', Path> matches the method, a space, then the path

type X = Request<'GET /users'>; // { method: 'GET'; path: '/users' }

Mempersempit Bagian yang Disimpulkan

Anda dapat membatasi variabel yang disimpulkan dengan extends secara langsung, sehingga variabel tersebut hanya cocok dengan bentuk tertentu. Di sini, metodenya harus berupa kata kerja yang dikenal.

type Method = 'GET' | 'POST';
type Parse<S> =
  S extends Tpl<(infer M extends Method), ' ', infer P>
    ? { method: M; path: P }
    : never;
// the inferred M is constrained to Method inside the template pattern

type X = Parse<'POST /x'>; // { method: 'POST'; path: '/x' }

Mengurai Pasangan Kunci-Nilai

Gabungkan pemisahan dan penguraian: pisahkan string query menjadi beberapa pasangan, lalu uraikan setiap pasangan menjadi kunci dan nilai. Hasilnya adalah tuple berisi entri terstruktur.

type Pair<S> =
  S extends Tpl<infer K, '=', infer V> ? [K, V] : [S, ''];
// Tpl<K, '=', V> splits a 'key=value' string literal type

type X = Pair<'page=2'>; // ['page', '2']

Membangun Objek dari Pasangan

Lipat tuple berisi pasangan kunci-nilai menjadi tipe objek menggunakan akumulator pemetaan/interseksi. Setiap pasangan menambahkan satu properti.

type FromPairs<T extends [string, string][]> =
  T extends [[infer K extends string, infer V], ...infer R extends [string, string][]]
    ? { [P in K]: V } & FromPairs<R>
    : {};

type X = FromPairs<[["a", "1"], ["b", "2"]]>; // { a: "1" } & { b: "2" }

Mengurai String Query

Satukan semuanya: pisahkan pada "&", uraikan setiap bagian pada "=", lalu bangun objeknya. Kini kompiler mengetahui kunci persis dari literal string query.

type ParseQuery<S extends string> =
  FromPairs<{ [I in keyof SplitAmp<S>]: Pair<SplitAmp<S>[I] & string> }>;
// where SplitAmp splits on "&" (from previous lesson)

Mengekstrak Angka

Bagian yang disimpulkan selalu berupa tipe literal string. Untuk memperlakukan suatu bagian sebagai angka, periksa apakah bagian itu cocok dengan pola numerik atau petakan melalui batasan yang hanya menerima digits. Nilainya tetap berupa tipe literal.

type IsNumeric<S extends string> =
  S extends Tpl<number> ? true : false;
// Tpl<number> is a template literal type that matches any numeric string

type X = IsNumeric<'42'>; // true
type Y = IsNumeric<'4a'>; // false

Segmen Opsional

Gunakan gabungan pola untuk menangani bagian opsional. Coba pola yang lebih lengkap terlebih dahulu; kembali ke pola yang lebih sederhana jika tidak cocok.

type ParsePath<S> =
  S extends Tpl<infer Base, '?', infer Query>
    ? { base: Base; query: Query }
    : { base: S; query: '' };
// Tpl<Base, '?', Query> matches an optional query after a question mark

type X = ParsePath<'/x?a=1'>; // { base: '/x'; query: 'a=1' }

Spasi Putih dan Kasus Khusus

String nyata dapat memiliki spasi yang tidak diperlukan. Susun pengurai Anda dengan Trim dari pelajaran sebelumnya agar spasi putih di awal dan akhir tidak merusak bidang yang diekstrak.

type CleanKey<S extends string> = Trim<S>;
// Apply Trim to each inferred segment before using it

Mengapa Ini Bermanfaat

Penguraian literal templat memungkinkan kompiler memahami format: tanggal, rute, kunci lingkungan, dan fragmen SQL. String yang salah menjadi kesalahan kompilasi, dan tipe lanjutan dapat bergantung pada struktur yang telah diurai. Literal string berubah menjadi nilai bertipe.

type Event<S> =
  S extends Tpl<infer Domain, ':', infer Action>
    ? { domain: Domain; action: Action }
    : never;
// Tpl<Domain, ':', Action> matches 'domain:action'
type X = Event<'user:created'>; // { domain: 'user'; action: 'created' }

Menyusun Pengurai

Sama seperti kombinator tingkat nilai, pengurai tingkat tipe juga dapat disusun. Pisahkan, lalu uraikan setiap bagian, kemudian rangkai menjadi objek. Setiap langkah adalah tipe kondisional kecil, dan bersama-sama langkah tersebut membentuk pengurai lengkap yang bertipe.

// Split -> Pair -> FromPairs is a parser pipeline at the type level

Uji Cepat

Uji pemahaman Anda tentang penguraian literal templat.

Jawab di pelajaran interaktif

Rangkuman

Anda telah mengekstrak data terstruktur dari tipe string.

Beberapa titik infer menangkap bidang bernama dalam satu pola.
Bagian yang disimpulkan dapat dipersempit dengan extends secara langsung.
Split, Pair, dan FromPairs dapat disusun menjadi pengurai query.
Trim dan pemeriksaan numerik menangani kasus khusus.

Berikutnya: pengurai rute mini yang lengkap.

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 “Mengurai dengan Literal Templat” gratis?

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

Ekstrak data terstruktur dari string menggunakan infer. 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 4.

Berapa lama pelajaran “Mengurai dengan 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