TypeScript Academy · Pelajaran

Keamanan Jenis Interpolasi

Ekstrak dan wajibkan variabel interpolasi dari string.

Keamanan Jenis Interpolasi 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.

Interpolasi Aman terhadap Tipe

Messages sering berisi tempat penampung seperti "Hello, {name}". i18n yang aman terhadap tipe mengekstrak nama tempat penampung tersebut dari tipe string message dan mengharuskan Anda memberikan argumen yang sesuai.

Tujuannya

Dari tipe literal sebuah message, kita ingin menghitung objek variabel yang dibutuhkannya, sehingga t("greet", { name: "Ada" }) diwajibkan dan name yang hilang menjadi error kompilasi.

Mengekstrak Satu Tempat Penampung

Tipe kondisional literal templat mengambil nama variabel dari string dengan satu tempat penampung. Dalam kode nyata, polanya ditulis dengan backtick sebagai: string, kurung kurawal buka, infer V, kurung kurawal tutup, string. Di bawah ini kami menyebut pencocok tersebut sebagai BraceMatch.

// Real TS pattern (backtick template literal):
//   matches any text, then {V}, then any text; infers V.

type Var<S extends string> =
  S extends BraceMatch<infer V> ? V : never;

type A = Var<"Hello, {name}">; // "name"

Mengekstrak Beberapa Tempat Penampung

Lakukan rekursi untuk mengumpulkan setiap tempat penampung ke dalam sebuah gabungan. Pola tersebut menangkap satu variabel dan sisa bagian string, lalu melakukan rekursi pada sisa bagian tersebut.

// Pattern: any text, {V}, then Rest tail -- infer V and Rest.

type Vars<S extends string> =
  S extends BraceMatchRest<infer V, infer Rest>
    ? V | Vars<Rest>
    : never;

type B = Vars<"Hi {first} {last}!">; // "first" | "last"

Dari Nama Menjadi Objek Argumen

Ubah gabungan nama menjadi tipe objek wajib dengan tipe pemetaan.

type ArgsOf<S extends string> = {
  [K in Vars<S>]: string | number;
};

type G = ArgsOf<"Hello, {name}">;
// { name: string | number }

Tanpa Tempat Penampung, Tanpa Argumen

Ketika sebuah message tidak memiliki tempat penampung, Vars bernilai never, sehingga objek argumennya kosong. Dalam kasus tersebut, kita dapat menjadikan parameter argumen bersifat opsional.

type C = Vars<"Goodbye">;       // never
type D = ArgsOf<"Goodbye">;     // {} (empty)

Fungsi Penerjemah Bertipe

Jadikan parameter argumen bergantung pada kunci yang dipilih dengan mencari literal message dan menghitung argumennya.

declare const messages: {
  greet: "Hello, {name}";
  invite: "Join {count} others";
};

declare function t<K extends keyof typeof messages>(
  key: K,
  args: ArgsOf<(typeof messages)[K]>
): string;

Penerapan dalam Praktik

Kompilator sekarang mengharuskan variabel persis yang dideklarasikan oleh setiap message.

t("greet", { name: "Ada" });   // ok
t("greet", {});                 // Error: name is missing
t("invite", { count: 3 });      // ok
t("invite", { name: "x" });     // Error: count missing, name unexpected

Argumen Opsional untuk Message Biasa

Gunakan beban berlebih kondisional agar message tanpa tempat penampung tidak memerlukan argumen kedua sama sekali.

type MaybeArgs<S extends string> =
  Vars<S> extends never ? [] : [args: ArgsOf<S>];

declare function t2<K extends keyof typeof messages>(
  key: K,
  ...rest: MaybeArgs<(typeof messages)[K]>
): string;

Pembatas Kustom

Jika katalog Anda menggunakan {{name}} atau %{name}, sesuaikan pola literal templat dalam Vars. Tekniknya sama; hanya literal di sekelilingnya yang berubah.

Mengapa Ini Penting

Variabel interpolasi yang hilang atau salah ketik merupakan sumber klasik teks antarmuka yang rusak ("Hello, undefined"). Mengekstraknya pada tingkat tipe mengubahnya menjadi galat kompilasi dan mendokumentasikan kontrak setiap pesan.

Uji Cepat

Uji pemahaman Anda tentang keamanan tipe interpolasi.

Ringkasan

Dengan mencocokkan pola tipe literal pesan menggunakan literal templat dan infer, Anda mengekstrak nama tempat penampung menjadi sebuah union, memetakannya ke objek argumen wajib, dan membuat fungsi penerjemahan meminta tepat variabel-variabel tersebut, atau bersifat opsional jika tidak ada.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Keamanan Jenis Interpolasi” gratis?

Ya — teks lengkap “Keamanan Jenis Interpolasi” 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 “Keamanan Jenis Interpolasi”?

Ekstrak dan wajibkan variabel interpolasi dari string. 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 “Keamanan Jenis Interpolasi” 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