0Pricing
TypeScript Academy · Pelajaran

Tanda Tangan Indeks String versus Number

Pahami aturan dan keunikan kunci numerik.

Tanda Tangan Indeks String versus Number 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.

Dua Jenis Kunci Indeks

TypeScript mendukung tanda tangan indeks teks dan angka. Keduanya tampak serupa, tetapi berperilaku berbeda karena cara JavaScript sebenarnya menyimpan keys objek.

Tanda Tangan Indeks Angka

Tanda tangan indeks angka { [i: number]: T } menjelaskan objek yang diindeks berdasarkan posisi numerik—secara alami, larik dan struktur yang menyerupai larik.

type NumberList = { [index: number]: string }

const names: NumberList = { 0: "ana", 1: "leo" }
console.log(names[0]) // ana

JS Mengubah Kunci Numerik Menjadi Teks

Inilah fakta pentingnya: keys objek JavaScript selalu berupa teks. Saat Anda menulis obj[0], mesin sebenarnya menyimpan kuncinya sebagai teks "0". TypeScript memodelkan kenyataan ini.

const obj: Record<string, string> = {}
obj[1] = "one"
console.log(obj["1"]) // one — same key!
console.log(Object.keys(obj)) // ["1"]

Aturan Kompatibilitas

Karena kunci numerik sebenarnya adalah teks di balik layar, TypeScript menerapkan aturan berikut: ketika sebuah objek memiliki tanda tangan indeks angka dan teks, tipe nilai indeks angka harus dapat ditetapkan ke tipe nilai indeks teks.

interface Mixed {
  [key: string]: string
  [index: number]: string // must match the string value type
}
const m: Mixed = { 0: "a", name: "b" }
console.log(m[0], m.name)

Alasan Aturan Ini Ada

Jika obj[0] dan obj["0"] adalah slot yang sama, tipe nilainya tidak mungkin berupa angka untuk satu akses dan teks untuk akses lainnya. Jadi, tipe nilai indeks angka harus menjadi subtipe dari tipe nilai indeks teks agar tetap konsisten.

// This is an ERROR:
// interface Bad {
//   [key: string]: string
//   [index: number]: number // number not assignable to string
// }

Larik Berindeks Angka

Larik adalah tipe kanonis yang diindeks dengan angka. Tipe bawaan Array<T> secara efektif memiliki tanda tangan indeks angka, sehingga arr[i] menghasilkan T.

const nums: number[] = [10, 20, 30]
const first: number = nums[0]
console.log(first + nums[2]) // 40

Tupel Juga Berindeks Angka

Tupel dibangun berdasarkan pengindeksan angka, tetapi menetapkan posisi tertentu pada tipe tertentu. Akses numerik di luar rentang beralih ke gabungan tipe elemen atau ditandai sebagai masalah.

const pair: [string, number] = ["age", 30]
const label: string = pair[0]
const value: number = pair[1]
console.log(label + ": " + value)

Indeks Teks Mengizinkan Kedua Jenis Pencarian

Objek dengan tanda tangan indeks teks tetap menerima akses yang tampak numerik, karena angka terlebih dahulu diubah menjadi kunci teks.

type Bag = { [key: string]: number }
const b: Bag = {}
b[5] = 100        // stored as key "5"
console.log(b["5"]) // 100

Indeks Angka Tidak Menerima Keys Teks

Hal sebaliknya tidak berlaku. Objek yang hanya memiliki tanda tangan indeks angka menolak keys teks saat waktu kompilasi, meskipun JS secara teknis mengizinkannya.

type OnlyNumbers = { [i: number]: string }
const o: OnlyNumbers = { 0: "x" }
// o.name = "y" // Error: property name not on number-indexed type
console.log(o[0])

Memilih di Antara Keduanya

Gunakan indeks angka untuk data seperti urutan yang berbasis posisi (daftar, tupel). Gunakan indeks teks untuk pencarian bernama (kamus, tembolok). Jika ragu, teks adalah pilihan yang lebih umum.

type Positions = { [i: number]: { x: number; y: number } }
type ByName = { [name: string]: { x: number; y: number } }
const p: Positions = { 0: { x: 1, y: 2 } }
console.log(p[0].x)

Objek Mixed yang Praktis

Anda dapat menggabungkan kedua tanda tangan jika satu tipe nilai sesuai untuk keduanya—berguna untuk wadah jarang yang menyerupai larik dan juga menyediakan posisi bernama.

interface Flexible {
  [key: string]: number
  [index: number]: number
}
const f: Flexible = { 0: 1, total: 99 }
console.log(f[0] + f.total) // 100

Pemeriksaan Singkat

Uji pemahaman Anda tentang tanda tangan indeks teks dan angka.

Rangkuman

Tanda tangan indeks teks dan angka berbeda karena JS menyimpan semua keys sebagai teks, dengan mengubah angka menjadi kunci teks. Tipe nilai indeks angka harus dapat ditetapkan ke tipe nilai indeks teks jika keduanya ada. Pengindeksan angka memodelkan larik dan tupel, sedangkan pengindeksan teks memodelkan kamus. Objek berindeks teks menerima akses numerik, tetapi objek berindeks angka menolak keys teks saat waktu kompilasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Tanda Tangan Indeks String versus Number” gratis?

Ya — teks lengkap “Tanda Tangan Indeks String versus Number” 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 “Tanda Tangan Indeks String versus Number”?

Pahami aturan dan keunikan kunci numerik. 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 “Tanda Tangan Indeks String versus Number” 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. Mendefinisikan Tanda Tangan Indeks
  2. Tanda Tangan Indeks String versus Number
  3. Menggabungkan Kunci yang Diketahui dan Dinamis
  4. Tanda Tangan Indeks versus Record
← Kembali ke TypeScript Academy