Mapped Type di TypeScript: Sintaks, Modifier, Key Remapping

Mapped type membangun tipe object baru dengan menelusuri sekumpulan key. { [K in keyof T]: boolean } berarti "untuk setiap key K dari T, buat properti bernama K bertipe boolean":

type Features = {
  darkMode: string;
  search: number;
  export: string[];
};

// Same keys as T, every property turned into a boolean
type Flags<T> = { [K in keyof T]: boolean };

const enabled: Flags<Features> = {
  darkMode: true,
  search: false,
  export: true,
};

console.log(enabled); // { darkMode: true, search: false, export: true }
// Leaving out "export" would be error TS2741: Property 'export' is missing

Tambahkan sebuah key ke Features, dan Flags<Features> juga akan mewajibkannya. Mapped type hanya ada saat kompilasi: ia menjelaskan object, bukan membuatnya.

Sintaksnya

Mapped type punya tiga bagian: variabel key, union berisi key yang ditelusuri, dan tipe properti, yang boleh memakai variabel key tersebut.

type MappedType = {
  [K in Keys]: PropertyType; // K takes each member of Keys in turn
};

Keys boleh berupa union apa pun yang berisi string, angka, atau symbol. Tidak harus berasal dari keyof:

type Size = "small" | "medium" | "large";

type PriceTable = { [S in Size]: number };
// { small: number; medium: number; large: number }

const prices: PriceTable = { small: 3, medium: 4, large: 5 };

for (const size of ["small", "large"] as const) {
  console.log(size, prices[size]);
}
// small 3
// large 5

Itulah persis yang dilakukan Record<Size, number>; Record adalah mapped type satu baris. Tipe properti boleh memakai key-nya: { [K in keyof T]: T[K] } menyalin setiap tipe properti lewat indexed access, dan { [K in keyof T]: T[K] | null } membuat setiap properti bisa bernilai null.

Modifier: readonly dan ? dengan + dan -

Mapped type bisa menambah atau menghapus modifier readonly dan opsional (?) pada setiap properti sekaligus. Beri awalan + untuk menambah (ini default kalau kamu tidak menulis apa pun) dan - untuk menghapus:

type Account = {
  readonly id: number;
  email?: string;
};

type Mutable<T> = { -readonly [K in keyof T]: T[K] };
type AllRequired<T> = { [K in keyof T]-?: T[K] };
type Frozen<T> = { +readonly [K in keyof T]: T[K] };

const editable: Mutable<Account> = { id: 1 };
editable.id = 2; // allowed: readonly was removed

const complete: AllRequired<Account> = { id: 1, email: "a@b.co" };
// { id: 1 } alone would be error TS2741: Property 'email' is missing

const frozen: Frozen<{ n: number }> = { n: 1 };
// @ts-expect-error: Cannot assign to 'n' because it is a read-only property
frozen.n = 2;

console.log(editable, complete, frozen);
// { id: 2 } { id: 1, email: 'a@b.co' } { n: 2 }

Baris terakhir menunjukkan bahwa readonly hanyalah aturan saat kompilasi: assignment itu dilaporkan (dan di sini diredam dengan @ts-expect-error), tetapi JavaScript yang dihasilkan tetap menjalankannya. -? tidak hanya membuang tanda tanya: ia juga membuang undefined dari tipe properti, jadi AllRequired<Account> menolak { id: 1, email: undefined } dengan error TS2322: Type 'undefined' is not assignable to type 'string'.

Cara Partial, Readonly, Pick, dan Record Dibuat

Utility type bawaan yang mengubah bentuk object adalah mapped type. Ini definisinya dari lib.es5.d.ts milik TypeScript sendiri:

type Partial<T> = { [P in keyof T]?: T[P] };
type Required<T> = { [P in keyof T]-?: T[P] };
type Readonly<T> = { readonly [P in keyof T]: T[P] };
type Pick<T, K extends keyof T> = { [P in K]: T[P] };
type Record<K extends keyof any, T> = { [P in K]: T };

Membacanya adalah latihan yang bagus: Pick hanya menelusuri key yang kamu kirim, dan Record mengabaikan tipe sumber apa pun serta memberi setiap key tipe value yang sama. Omit bukan mapped type tersendiri: ia adalah Pick<T, Exclude<keyof T, K>>. Referensi utility type mencantumkan semuanya.

Key Remapping dengan as

Klausa as setelah key mengubah nama properti. Jika digabung dengan template literal type, klausa ini bisa membuat nama baru dari nama lama:

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type Person = { name: string; age: number };

// { getName: () => string; getAge: () => number }
const person: Getters<Person> = {
  getName: () => "Ada",
  getAge: () => 36,
};

console.log(person.getName(), person.getAge()); // Ada 36

string & K ada di sana karena keyof T bisa berisi key bertipe number dan symbol, sedangkan Capitalize hanya menerima string. Intersection itu mempertahankan key berupa string dan membuang sisanya.

Menyaring Key dengan never

Kalau klausa as menghasilkan never untuk sebuah key, key itu dihapus. Dengan conditional type, kamu bisa mempertahankan atau membuang properti berdasarkan tipenya:

type DataOnly<T> = {
  [K in keyof T as T[K] extends (...args: any[]) => unknown ? never : K]: T[K];
};

class Invoice {
  constructor(public id: number, public total: number) {}
  format(): string {
    return `#${this.id}: ${this.total.toFixed(2)}`;
  }
}

// { id: number; total: number }  (format is gone)
const data: DataOnly<Invoice> = { id: 7, total: 19.5 };

console.log(data);                        // { id: 7, total: 19.5 }
console.log(new Invoice(7, 19.5).format()); // #7: 19.50

Tipe seperti DataOnly berguna untuk menjelaskan apa yang tersisa setelah JSON.stringify, atau apa yang diedit sebuah form: field-nya saja tanpa method.

Modifier Mana yang Dipertahankan

Mapped type atas keyof T untuk suatu tipe T disebut homomorphic, dan ia menyalin modifier readonly dan ? setiap properti dari T. Mapped type atas union key biasa dimulai tanpa modifier apa pun:

type Account = { readonly id: number; email?: string };

type Copy<T> = { [K in keyof T]: T[K] };
type A = Copy<Account>;
// { readonly id: number; email?: string }  (modifiers kept)

type B = { [K in "id" | "email"]: Account[K] };
// { id: number; email: string | undefined }  (email is required now)

B masih punya undefined di tipe email, karena Account["email"] memang mengandungnya, tetapi propertinya sendiri tidak lagi opsional: { id: 1 } ditolak. Itulah sebabnya Partial<T> dan kawan-kawannya menelusuri keyof T: mereka mempertahankan semua yang tidak mereka ubah secara eksplisit.

Mapped type homomorphic yang generic, jika diterapkan pada array atau tuple, menghasilkan array atau tuple, bukan object dengan key berupa angka. Readonly<string[]> adalah readonly string[], dan dengan type Box<T> = { [K in keyof T]: { value: T[K] } }, Box<[string, number]> adalah [{ value: string }, { value: number }].

Mapped Type dan Kode Runtime

Karena mapped type hanya menjelaskan sebuah object, fungsi yang membangun object seperti itu butuh perulangan runtime-nya sendiri. Tipe tersebut lalu menjelaskan hasilnya:

type Validators<T> = { [K in keyof T]: (value: T[K]) => boolean };

type SignUp = { email: string; age: number };

const rules: Validators<SignUp> = {
  email: (v) => v.includes("@"), // v is string
  age: (v) => v >= 13,           // v is number
};

function validate(form: SignUp): string[] {
  const failed: string[] = [];
  for (const key of Object.keys(rules) as (keyof SignUp)[]) {
    const ok = key === "email" ? rules.email(form.email) : rules.age(form.age);
    if (!ok) failed.push(key);
  }
  return failed;
}

console.log(validate({ email: "ada@example.com", age: 36 })); // []
console.log(validate({ email: "nope", age: 9 }));             // [ 'email', 'age' ]

Callback-callback itu mendapat tipe parameternya dari mapped type (v bertipe string di yang satu dan number di yang lain) tanpa anotasi apa pun. Kalau kamu datang ke sini untuk mencari class Map, bukan pemetaan tipe, lihat Map di TypeScript.