Indexed access type TypeScript: T[K], T[number] và hơn thế

Indexed access type tra kiểu của một thuộc tính trên một kiểu khác, với đúng cú pháp ngoặc vuông mà JavaScript dùng để truy cập thuộc tính. Person["age"] là number, còn Person["address"]["city"] là 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

Lợi ích là chỉ có một nguồn sự thật duy nhất. Age không phải một bản sao thứ hai của number: nếu Person["age"] đổi thành string, mọi kiểu được viết là Person["age"] cũng đổi theo. Indexed access type chỉ tồn tại lúc biên dịch; chúng không sinh ra dòng JavaScript nào.

Khóa dạng union và T[keyof T]

Chỉ số có thể là một union các khóa. Kết quả là union của các kiểu thuộc tính tương ứng:

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] là cách nói ở cấp kiểu cho "một giá trị thuộc tính bất kỳ của Product". Hỏi một khóa không tồn tại sẽ gây lỗi biên dịch: Product["price"] cho ra error TS2339: Property 'price' does not exist on type 'Product'.

Thuộc tính tùy chọn có kèm undefined

Khi bật strictNullChecks (được bật sẵn trong strict), kiểu của một thuộc tính tùy chọn có kèm undefined, và indexed access type của nó cũng vậy:

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

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

Để bỏ undefined, bọc nó lại: NonNullable<Profile["nickname"]> là string.

Kiểu phần tử mảng với T[number]

Mảng được đánh chỉ số bằng số, nên lấy chỉ số kiểu mảng bằng number sẽ cho ra kiểu phần tử. Cách này cũng dùng được qua nhiều cấp:

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

Cách này hữu ích khi một kiểu đến từ nơi bạn không kiểm soát, chẳng hạn một API client được sinh tự động: ApiResponse["data"]["users"][number] gọi tên kiểu user mà không cần ai export nó ra.

Tuple: lấy chỉ số theo vị trí

Một kiểu tuple có thể được lấy chỉ số bằng một vị trí cụ thể, bằng number để có union của mọi kiểu phần tử, và bằng "length" để có độ dài dưới dạng kiểu 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 từ một mảng const

Cách dùng phổ biến nhất trong thực tế: giữ danh sách các giá trị hợp lệ trong một mảng (để có thể lặp qua lúc chạy) và suy ra union type từ nó (để trình biên dịch kiểm tra).

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

Có hai phần làm nên điều này. as const biến mảng thành một tuple readonly gồm các kiểu literal; không có nó, ROLES là string[] và (typeof ROLES)[number] chỉ là string. Sau đó typeof biến giá trị thành kiểu, và [number] gom các phần tử thành một union. Dấu ngoặc tròn là tùy chọn (typeof ROLES[number] có cùng nghĩa), nhưng chúng làm rõ thứ tự thực hiện.

Kiểm tra một chuỗi với mảng

Tuple readonly đó có một điểm bất ngờ. Phương thức includes của nó chỉ nhận kiểu phần tử, nên bạn không thể truyền một chuỗi bất kỳ vào:

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

Mở rộng mảng thành readonly string[] khi kiểm tra, và biến hàm thành một type guard để một lần kiểm tra thành công sẽ thu hẹp kiểu của giá trị:

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

Mẫu này cho bạn một danh sách dùng cho cả hai việc: phần kiểm tra lúc chạy dùng mảng, còn kiểu được suy ra từ chính mảng đó, nên hai bên không bao giờ lệch nhau.

Indexed access trong generic: T[K]

Bên trong một generic, T[K] với K extends keyof T là kiểu của thuộc tính mà nơi gọi đã chọn:

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

Ràng buộc K extends keyof T là thứ làm cho T[K] hợp lệ. Thiếu nó, TypeScript không thể biết K là một khóa của T và báo error TS2536: Type 'K' cannot be used to index type 'T'.

Tóm tắt cú pháp

Chỉ số luôn là một kiểu. Person[key] với key là một biến const sẽ bị hai lỗi: error TS2538: Type 'key' cannot be used as an index type. và error TS2749: 'key' refers to a value, but is being used as a type here. Did you mean 'typeof key'?.