Indexed Access Type TypeScript: T[K], T[number], dan Lainnya

Indexed access type mencari tipe sebuah properti pada tipe lain, dengan sintaks kurung siku yang sama seperti akses properti di JavaScript. Person["age"] adalah number, dan Person["address"]["city"] adalah string.

type Person = {
  name: string;
  age: number;
  address: { city: string; zip: string };
};

type Age = Person["age"];                 // number
type City = Person["address"]["city"];    // string
type Address = Person["address"];         // { city: string; zip: string }

const age: Age = 36;
const home: Address = { city: "London", zip: "N1" };
const city: City = home.city;

console.log(age, city); // 36 London

Keuntungannya adalah satu sumber kebenaran. Age bukan salinan kedua dari number: kalau Person["age"] berubah menjadi string, setiap tipe yang ditulis sebagai Person["age"] ikut berubah. Indexed access type hanya ada saat kompilasi; ia tidak menghasilkan kode JavaScript apa pun.

Key Berupa Union dan T[keyof T]

Indeksnya bisa berupa union dari beberapa key. Hasilnya adalah union dari tipe-tipe properti tersebut:

type Product = {
  id: number;
  title: string;
  inStock: boolean;
};

type IdOrTitle = Product["id" | "title"];  // number | string
type AnyValue = Product[keyof Product];    // number | string | boolean

function describe(value: AnyValue): string {
  return `${typeof value}: ${value}`;
}

const p: Product = { id: 7, title: "Lamp", inStock: false };
for (const key of ["id", "title", "inStock"] as const) {
  console.log(describe(p[key]));
}
// number: 7
// string: Lamp
// boolean: false

Product[keyof Product] adalah cara di level tipe untuk mengatakan "nilai properti apa pun dari Product". Meminta key yang tidak ada adalah error kompilasi: Product["price"] menghasilkan error TS2339: Property 'price' does not exist on type 'Product'.

Properti Opsional Mengandung undefined

Dengan strictNullChecks (aktif di bawah strict), tipe properti opsional mengandung undefined, begitu juga indexed access type-nya:

type Profile = { name: string; nickname?: string };

type Nick = Profile["nickname"]; // string | undefined

Untuk membuang undefined, bungkus tipenya: NonNullable<Profile["nickname"]> adalah string.

Tipe Elemen Array dengan T[number]

Array diberi indeks dengan angka, jadi memberi indeks number pada tipe array menghasilkan tipe elemennya. Ini juga bekerja melewati beberapa level:

type Order = {
  id: number;
  items: { sku: string; qty: number }[];
};

type Orders = Order[];

type OneOrder = Orders[number];             // Order
type Item = Order["items"][number];         // { sku: string; qty: number }
type Sku = Orders[number]["items"][number]["sku"]; // string

const item: Item = { sku: "A-100", qty: 2 };
const sku: Sku = item.sku;
console.log(sku, item.qty); // A-100 2

Ini berguna kalau sebuah tipe berasal dari tempat yang tidak kamu kendalikan, misalnya API client yang di-generate: ApiResponse["data"]["users"][number] memberi nama pada tipe user tanpa ada yang perlu meng-export-nya.

Tuple: Indeks Berdasarkan Posisi

Tipe tuple bisa diberi indeks dengan posisi tertentu, dengan number untuk union dari semua tipe elemennya, dan dengan "length" untuk panjangnya sebagai tipe literal:

type Entry = [string, number, boolean];

type First = Entry[0];         // string
type Second = Entry[1];        // number
type AnyElement = Entry[number]; // string | number | boolean
type Len = Entry["length"];    // 3

const len: Len = 3;
const entry: Entry = ["ada", 36, true];
const first: First = entry[0];

console.log(first, len); // ada 3
// Entry[3] is error TS2493: Tuple type 'Entry' of length '3' has no element at index '3'.

(typeof arr)[number]: Union dari Array const

Pemakaian yang paling sering di dunia nyata: simpan daftar nilai yang diizinkan sebagai array (supaya bisa di-loop saat runtime), lalu turunkan union type darinya (supaya compiler bisa memeriksanya).

const ROLES = ["admin", "editor", "viewer"] as const;

type Role = (typeof ROLES)[number]; // "admin" | "editor" | "viewer"

function canPublish(role: Role): boolean {
  return role !== "viewer";
}

for (const role of ROLES) {
  console.log(role, canPublish(role));
}
// admin true
// editor true
// viewer false

Ada dua bagian yang membuatnya bekerja. as const membuat array menjadi tuple readonly berisi tipe literal; tanpanya, ROLES adalah string[] dan (typeof ROLES)[number] hanya string. Lalu typeof mengubah nilai menjadi tipe, dan [number] mengumpulkan elemen-elemennya menjadi union. Tanda kurungnya opsional (typeof ROLES[number] artinya sama), tetapi membuat urutan operasinya jelas.

Memeriksa String terhadap Array

Tuple readonly itu punya satu kejutan. Method includes-nya hanya menerima tipe elemen, jadi kamu tidak bisa mengirim string sembarang ke sana:

// This does not compile: includes() on the tuple only accepts a Role
const ROLES = ["admin", "editor", "viewer"] as const;
type Role = (typeof ROLES)[number];

function isRole(value: string): boolean {
  return ROLES.includes(value);
}

console.log(isRole("admin"));

index.ts(6,25): error TS2345: Argument of type 'string' is not assignable to parameter of type '"admin" | "editor" | "viewer"'.

Lebarkan array menjadi readonly string[] untuk pemeriksaannya, lalu ubah fungsinya menjadi type guard agar pemeriksaan yang berhasil mempersempit tipe nilainya:

const ROLES = ["admin", "editor", "viewer"] as const;
type Role = (typeof ROLES)[number];

function isRole(value: string): value is Role {
  return (ROLES as readonly string[]).includes(value);
}

const input: string = "editor"; // imagine this came from a URL or a form
if (isRole(input)) {
  const role: Role = input; // narrowed to Role here
  console.log("valid role:", role);
}
console.log(isRole("owner")); // false

Pola ini memberimu satu daftar untuk dua tugas: pemeriksaan saat runtime memakai array, dan tipenya diturunkan dari array itu, jadi keduanya tidak bisa tidak sinkron.

Indexed Access di Generic: T[K]

Di dalam generic, T[K] dengan K extends keyof T adalah tipe dari properti mana pun yang dipilih pemanggil:

function pluck<T, K extends keyof T>(items: T[], key: K): T[K][] {
  return items.map((item) => item[key]);
}

const users = [
  { name: "Ada", age: 36 },
  { name: "Linus", age: 28 },
];

const names = pluck(users, "name"); // string[]
const ages = pluck(users, "age");   // number[]

Constraint K extends keyof T itulah yang membuat T[K] sah. Tanpanya, TypeScript tidak bisa tahu bahwa K adalah key dari T dan melaporkan error TS2536: Type 'K' cannot be used to index type 'T'.

Ringkasan Sintaks

Indeksnya selalu berupa tipe. Person[key] dengan key adalah variabel const gagal dengan dua error: error TS2538: Type 'key' cannot be used as an index type. dan error TS2749: 'key' refers to a value, but is being used as a type here. Did you mean 'typeof key'?.