Record di TypeScript: Penjelasan Record<K, V> dan Contohnya

Record<K, V> adalah utility type bawaan untuk object yang key-nya bertipe K dan semua nilainya bertipe V. Dengan key string, tipe ini menggambarkan dictionary; dengan union dari literal key, tipe ini menggambarkan object yang harus punya tepat key-key itu.

// Any string key, number values
const stock: Record<string, number> = { apples: 12, pears: 0 };
stock.plums = 7;

// Exactly these three keys, each with a string value
type Lang = "en" | "de" | "fr";
const greeting: Record<Lang, string> = {
  en: "Hello",
  de: "Hallo",
  fr: "Bonjour",
};

console.log(stock);          // { apples: 12, pears: 0, plums: 7 }
console.log(greeting.de);    // Hallo

Record hanya ada di sistem tipe. Saat runtime, kedua object itu adalah object JavaScript biasa, jadi keduanya bekerja dengan object literal, spread, JSON.stringify, dan apa pun yang menerima object.

Sintaks dan Definisi

Record<Keys, Value>

Keys harus sesuatu yang bisa menjadi key object: string, number, symbol, union dari literal string atau number, atau template literal type. Value boleh tipe apa pun. Seluruh definisinya di standard library TypeScript hanya satu baris, sebuah mapped type:

type Record<K extends keyof any, T> = {
  [P in K]: T;
};

keyof any adalah string | number | symbol, himpunan semua tipe key yang mungkin. [P in K]: T membuat satu property bertipe T untuk setiap anggota K. Itulah yang menjelaskan kedua perilaku di bawah: K yang luas seperti string menghasilkan index signature (key apa pun), dan K berupa union menghasilkan satu property wajib untuk setiap anggotanya.

Key Union: Setiap Key Wajib Ada

Kalau key-nya berupa union dari literal, sebuah Record harus mencantumkan setiap key itu, dan tidak boleh yang lain. Ini mengubah compiler menjadi daftar periksa:

type Status = "idle" | "loading" | "success" | "error";

const label: Record<Status, string> = {
  idle: "Ready",
  loading: "Loading...",
  success: "Done",
  error: "Something went wrong",
};

const color: Record<Status, `#${string}`> = {
  idle: "#888888",
  loading: "#3b82f6",
  success: "#16a34a",
  error: "#dc2626",
};

function render(s: Status): string {
  return `${label[s]} (${color[s]})`;
}

console.log(render("success")); // Done (#16a34a)

Tambahkan "cancelled" ke Status dan kedua object itu berhenti lolos kompilasi sampai kamu memberi status baru itu label dan warna. Melewatkan sebuah key, atau menambahkan key yang tidak ada di union, adalah error kompilasi:

// This does not compile: one key is missing and one is not allowed
type Status = "idle" | "loading" | "success" | "error";

const label: Record<Status, string> = {
  idle: "Ready",
  loading: "Loading...",
  success: "Done",
};

const icon: Record<Status, string> = {
  idle: "o", loading: "~", success: "v", error: "x", paused: "=",
};

index.ts(4,7): error TS2741: Property 'error' is missing in type '{ idle: string; loading: string; success: string; }' but required in type 'Record<Status, string>'.
index.ts(11,54): error TS2353: Object literal may only specify known properties, and 'paused' does not exist in type 'Record<Status, string>'.

Hal yang sama berlaku dengan string enum sebagai tipe key: Record<Color, string> mewajibkan satu entri untuk setiap anggota enum.

Record<string, T> dan Key yang Tidak Ada

Dengan key string, key apa pun diperbolehkan, dan TypeScript memberi setiap pembacaan tipe T, bahkan untuk key yang tidak ada. Saat runtime, key yang tidak ada menghasilkan undefined:

const prices: Record<string, number> = { tea: 2.5, coffee: 3.2 };

const juice = prices["juice"]; // typed number, but undefined at runtime
console.log(juice);            // undefined
console.log(juice * 2);        // NaN, and no compile error

// Check before you use it
if ("juice" in prices) {
  console.log("juice costs", prices.juice);
} else {
  console.log("no juice"); // no juice
}

// Or put undefined in the value type so the compiler makes you check
const safePrices: Record<string, number | undefined> = { tea: 2.5 };
const maybe = safePrices["juice"]; // number | undefined
console.log(maybe ?? 0);           // 0

Ini adalah bug Record yang paling umum. Ada tiga cara menanganinya: cek dengan in atau Object.hasOwn sebelum membaca, deklarasikan nilainya sebagai V | undefined, atau aktifkan opsi compiler noUncheckedIndexedAccess, yang menambahkan | undefined ke setiap pembacaan index signature di seluruh proyek. Record dengan key union tidak punya masalah ini, karena setiap key dijamin ada.

Partial<Record<K, V>>: Hanya Sebagian Key

Untuk memakai union key tanpa mewajibkan semuanya, bungkus Record dengan Partial. Pembacaan lalu mengembalikan V | undefined, dan itu memang jujur:

type Lang = "en" | "de" | "fr" | "ja";

// Translations are optional per language, but only these languages are allowed
const title: Partial<Record<Lang, string>> = {
  en: "Settings",
  de: "Einstellungen",
};

function translate(lang: Lang): string {
  return title[lang] ?? title.en ?? "(missing)";
}

console.log(translate("de")); // Einstellungen
console.log(translate("ja")); // Settings

// Required "en", optional others
type Labels = Record<"en", string> & Partial<Record<Exclude<Lang, "en">, string>>;
const save: Labels = { en: "Save", fr: "Enregistrer" };
console.log(save); // { en: 'Save', fr: 'Enregistrer' }

Key yang salah eja seperti jp tetap menjadi error, dan itulah keunggulannya dibanding Record<string, string>.

Perulangan atas Record

Object.keys, Object.values dan Object.entries semuanya berfungsi. Masalahnya ada di tipe key: Object.keys mengembalikan string[] dan Object.entries mengembalikan [string, V][], tidak pernah union key milikmu:

type Plan = "free" | "pro" | "team";
const seats: Record<Plan, number> = { free: 1, pro: 1, team: 10 };

for (const [plan, n] of Object.entries(seats)) {
  console.log(plan, n); // plan is string, n is number
}
// free 1
// pro 1
// team 10

// When you need the union type, cast the keys
const plans = Object.keys(seats) as Plan[];
const total = plans.reduce((sum, p) => sum + seats[p], 0);
console.log(total); // 12

// for...in gives string keys too
for (const key in seats) {
  console.log(key.toUpperCase()); // FREE, PRO, TEAM on separate lines
}

TypeScript sengaja mempertahankan key sebagai string: sebuah object bisa punya property lebih banyak saat runtime daripada yang tercantum di tipenya, jadi menjanjikan Plan[] secara umum tidak aman. Untuk object yang kamu buat dari literal, seperti seats, cast-nya aman.

Membangun Record dari Data

Record adalah hasil yang biasa dari mengelompokkan atau mengindeks sebuah array. Mulai dari object kosong bertipe Record, lalu isi:

interface Book {
  id: string;
  title: string;
  genre: "fiction" | "science" | "history";
}

const books: Book[] = [
  { id: "b1", title: "Dune", genre: "fiction" },
  { id: "b2", title: "Cosmos", genre: "science" },
  { id: "b3", title: "Emma", genre: "fiction" },
];

// Index by id
const byId: Record<string, Book> = {};
for (const b of books) byId[b.id] = b;

// Group by genre (every genre present, even if empty)
const byGenre: Record<Book["genre"], string[]> = { fiction: [], science: [], history: [] };
for (const b of books) byGenre[b.genre].push(b.title);

console.log(byId.b2.title); // Cosmos
console.log(byGenre);       // { fiction: [ 'Dune', 'Emma' ], science: [ 'Cosmos' ], history: [] }

// Object.fromEntries gives { [k: string]: V }, which fits Record<string, V>
const titles: Record<string, string> = Object.fromEntries(books.map((b) => [b.id, b.title]));
console.log(titles); // { b1: 'Dune', b2: 'Cosmos', b3: 'Emma' }

Book["genre"] memakai ulang union dari interface sebagai tipe key, jadi menambahkan genre ke Book membuat byGenre menuntut entri baru.

Record<string, unknown> dan Interface

Record<string, unknown> adalah tipe yang umum untuk "suatu object dengan key string". Tipe ini menerima object literal dan nilai yang bertipe type alias, tetapi interface ditolak:

// This does not compile: interfaces have no implicit index signature
interface User {
  name: string;
}

function logFields(obj: Record<string, unknown>) {
  console.log(Object.keys(obj));
}

const user: User = { name: "Ada" };
logFields(user);

index.ts(11,11): error TS2345: Argument of type 'User' is not assignable to parameter of type 'Record<string, unknown>'.
  Index signature for type 'string' is missing in type 'User'.

Interface bisa diperluas lewat declaration merging, jadi TypeScript tidak menganggapnya cocok dengan index signature; type alias tidak bisa dibuka ulang, jadi type User = { name: string } akan lolos. Perbaikan yang biasa adalah menerima object sebagai gantinya (kamu tetap bisa memanggil Object.keys padanya), membuat fungsinya generic (<T extends object>(obj: T)), atau mendeklarasikan User dengan type (halaman interface vs type membahas perbedaan lainnya).

Record vs Index Signature vs Map

Pilih Record dengan key union setiap kali himpunan key-nya diketahui: hanya opsi ini yang mengecek bahwa setiap key ada. Untuk key string yang terbuka, Record<string, V> dan index signature bisa saling menggantikan, dan banyak codebase memilih Record karena lebih mudah dibaca. Pakai Map kalau key ditambah dan dihapus saat runtime, kalau key-nya bukan string, atau kalau kamu butuh ukuran dan urutan penyisipan tanpa kerja tambahan.