TypeScript İndeksli Erişim Tipleri: T[K], T[number] ve Fazlası

İndeksli erişim tipi, JavaScript'in özellik erişimi için kullandığı köşeli parantez sözdizimiyle, başka bir tip üzerindeki bir özelliğin tipini arar. Person["age"], number tipidir; Person["address"]["city"] ise string tipidir.

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

Faydası tek bir doğruluk kaynağıdır. Age, number tipinin ikinci bir kopyası değildir: Person["age"] tipi string olarak değişirse, Person["age"] olarak yazılmış her tip de onunla birlikte değişir. İndeksli erişim tipleri yalnızca derleme zamanında vardır; hiç JavaScript üretmezler.

Union Anahtarlar ve T[keyof T]

İndeks bir anahtar union'ı olabilir. Sonuç, özellik tiplerinin union'ıdır:

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], tip düzeyinde "Product'ın herhangi bir özellik değeri" demenin yoludur. Var olmayan bir anahtarı istemek bir derleme hatasıdır: Product["price"], error TS2339: Property 'price' does not exist on type 'Product' verir.

Opsiyonel Özellikler undefined İçerir

strictNullChecks açıkken (strict kapsamında açıktır), opsiyonel bir özelliğin tipi undefined içerir; indeksli erişim tipi de öyle:

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

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

undefined değerini çıkarmak için sarmalayın: NonNullable<Profile["nickname"]>, string olur.

T[number] ile Dizi Eleman Tipleri

Diziler sayılarla indekslenir, bu yüzden bir dizi tipini number ile indekslemek eleman tipini verir. Bu birkaç seviye boyunca da çalışır:

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

Bu, bir tip kontrol etmediğiniz bir yerden geldiğinde işe yarar, örneğin üretilmiş bir API istemcisinden: ApiResponse["data"]["users"][number], kimse dışa aktarmamış olsa bile kullanıcı tipine bir ad verir.

Tuple'lar: Konuma Göre İndeksleme

Bir tuple tipi belirli bir konumla, tüm eleman tiplerinin union'ı için number ile ve uzunluğunu literal bir tip olarak almak için "length" ile indekslenebilir:

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]: Bir const Diziden Union

Gerçek hayattaki en yaygın kullanım: izin verilen değerlerin listesini bir dizi olarak tutun (böylece çalışma zamanında üzerinde dönebilirsiniz) ve union tipini ondan türetin (böylece derleyici onu kontrol eder).

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

Bunu iki parça çalıştırır. as const, diziyi literal tiplerden oluşan readonly bir tuple yapar; o olmadan ROLES, string[] olur ve (typeof ROLES)[number] yalnızca string olur. Sonra typeof değeri bir tipe çevirir, [number] da elemanlarını bir union'da toplar. Parantezler isteğe bağlıdır (typeof ROLES[number] aynı anlama gelir), ama işlem sırasını netleştirir.

Bir String'i Diziye Karşı Kontrol Etmek

Bu readonly tuple'ın bir sürprizi var. includes metodu yalnızca eleman tipini kabul eder, bu yüzden ona rastgele bir string geçiremezsiniz:

// 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"'.

Kontrol için diziyi readonly string[] olarak genişletin ve fonksiyonu bir type guard haline getirin ki başarılı bir kontrol değeri daraltsın:

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

Bu kalıp size iki iş için tek bir liste verir: çalışma zamanı kontrolü diziyi kullanır, tip de ondan türetilir; bu yüzden ikisi birbirinden kopamaz.

Generics'te İndeksli Erişim: T[K]

Bir generic içinde, K extends keyof T ile T[K], çağıranın seçtiği özellik hangisiyse onun tipidir:

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[]

T[K] ifadesini geçerli kılan şey K extends keyof T kısıtlamasıdır. O olmadan TypeScript K değerinin T tipinin bir anahtarı olduğunu bilemez ve error TS2536: Type 'K' cannot be used to index type 'T' bildirir.

Bir Bakışta Sözdizimi

İndeks her zaman bir tiptir. key bir const değişken iken Person[key] iki hatayla başarısız olur: error TS2538: Type 'key' cannot be used as an index type. ve error TS2749: 'key' refers to a value, but is being used as a type here. Did you mean 'typeof key'?.