TypeScript Academy · Pelajaran

Menentukan Jenis Kunci Terjemahan

Turunkan union kunci valid dari file pesan.

Menentukan Jenis Kunci Terjemahan adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Menurunkan Kunci Terjemahan yang Valid

Dalam pengaturan i18n yang aman terhadap tipe, kumpulan kunci terjemahan yang valid diturunkan dari objek messages Anda. Salah ketik seperti t("greetng") menjadi error kompilasi, bukan bug string yang hilang saat runtime.

Objek messages

Mulailah dengan objek biasa yang berisi messages. Objek ini menjadi satu-satunya sumber kebenaran untuk nilai dan tipe kunci.

const messages = {
  greeting: "Hello",
  farewell: "Goodbye",
  cart: {
    empty: "Your cart is empty",
    checkout: "Proceed to checkout",
  },
} as const;

Kunci Tingkat Atas dengan keyof

Untuk objek datar, keyof typeof menghasilkan gabungan kunci.

type TopKeys = keyof typeof messages;
// "greeting" | "farewell" | "cart"

Masalah Bersarang

Katalog messages nyata memiliki struktur bersarang. Kita menginginkan jalur bertitik seperti "cart.empty", bukan hanya kunci tingkat atas. Kita memerlukan tipe rekursif yang menelusuri objek tersebut.

Tipe Jalur Rekursif

Tipe kondisional + tipe pemetaan membangun jalur bertitik dengan melakukan rekursi ke dalam objek bersarang dan menambahkan awalan pada kunci. Awalan tersebut menggunakan tipe literal templat, yang dalam kode nyata ditulis dengan backtick sebagai [backtick]${K}.${Paths<T[K]>}[backtick]. Di bawah ini kami menampilkannya sebagai JoinPath(K, child) agar daftar kode tetap rapi.

type JoinPath<K extends string, Rest extends string> = K + "." + Rest;
// (Real TS uses a template literal type:
//   the K dot Rest pattern delimited by backticks.)

type Paths<T> = {
  [K in keyof T & string]: T[K] extends string
    ? K
    : K | (T[K] extends object
        ? JoinPath<K, Paths<T[K]>>
        : never);
}[keyof T & string];

Menerapkannya

Memberikan tipe messages kepada Paths menghasilkan setiap kunci bertitik yang valid.

type MsgKey = Paths<typeof messages>;
// "greeting" | "farewell" | "cart" | "cart.empty" | "cart.checkout"

Kunci Hanya pada Ujung

Sering kali Anda hanya menginginkan jalur ujung (string sebenarnya), dengan mengecualikan objek perantara. Sesuaikan rekursi agar melewati simpul yang bukan string. Awalan K-titik-anak kembali menggunakan tipe literal templat (dibatasi backtick dalam kode nyata), yang di sini ditampilkan sebagai JoinPath.

type LeafPaths<T> = T extends string
  ? ""
  : {
      [K in keyof T & string]: T[K] extends string
        ? K
        : JoinPath<K, LeafPaths<T[K]>>;
    }[keyof T & string];
// "greeting" | "farewell" | "cart.empty" | "cart.checkout"

Fungsi t Bertipe

Batasi parameter fungsi penerjemah pada gabungan kunci yang diturunkan agar hanya kunci valid yang dapat dikompilasi.

declare function t(key: LeafPaths<typeof messages>): string;

t("cart.empty");   // ok
t("cart.missing"); // Error: not a valid key

Menentukan Tipe Nilai

Anda dapat melangkah lebih jauh dan menyimpulkan tipe nilai pada sebuah jalur, yang berguna ketika messages memiliki entri non-string. Tipe kondisional pengindeks jalur menelusuri titik-titik tersebut. Tipe ini memisahkan jalur dengan pola literal templat yang dalam kode nyata ditulis menggunakan backtick sebagai bentuk Kepala titik Sisa dengan infer. Di bawah ini kami menyebut pemisahan tersebut sebagai SplitHead/SplitRest.

// Conceptually: split "cart.empty" into Head="cart", Rest="empty"
// using a template literal pattern with infer.

type ValueAt<T, P extends string> =
  P extends SplitHead<infer Head, infer Rest>
    ? Head extends keyof T ? ValueAt<T[Head], Rest> : never
    : P extends keyof T ? T[P] : never;

Mengapa as const Penting

Tanpa as const, nilai string melebar menjadi string dan Anda kehilangan informasi literal yang dibutuhkan nanti (misalnya untuk ekstraksi tempat penampung). Selalu deklarasikan katalog sebagai const.

Mengapa Ini Penting

Menurunkan kunci dari katalog berarti menambahkan, mengganti nama, atau menghapus sebuah message seketika memperbarui tipe kunci yang diizinkan di mana pun. Tidak ada enum pusat yang perlu dipelihara dan tidak ada konstanta string usang.

Pemeriksaan Cepat

Pastikan pemahaman Anda tentang pengetikan kunci terjemahan.

Rangkuman

Anda menurunkan gabungan kunci valid dari objek messages menggunakan keyof dan tipe jalur literal templat rekursif. Varian yang hanya memiliki ujung mengecualikan objek perantara, t bertipe menolak kunci yang tidak valid, dan as const mempertahankan informasi literal yang diperlukan oleh mekanisme tipe.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menentukan Jenis Kunci Terjemahan” gratis?

Ya — teks lengkap “Menentukan Jenis Kunci Terjemahan” 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 “Menentukan Jenis Kunci Terjemahan”?

Turunkan union kunci valid dari file pesan. 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 1 dari 4.

Berapa lama pelajaran “Menentukan Jenis Kunci Terjemahan” 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