TypeScript 索引访问类型：T[K]、T[number] 等用法

索引访问类型用来查找另一个类型上某个属性的类型，语法和 JavaScript 访问属性时的方括号一样。Person["age"] 是 number，Person["address"]["city"] 是 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

好处是只有唯一的数据来源。Age 并不是 number 的第二份副本：如果 Person["age"] 改成了 string，所有写成 Person["age"] 的类型都会随之改变。索引访问类型只在编译时存在，不会生成任何 JavaScript 代码。

联合类型的键与 T[keyof T]

索引可以是由多个键组成的联合类型，结果就是这些属性类型组成的联合类型：

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] 是在类型层面表达“Product 的任意一个属性值”的方式。访问不存在的键是一个编译错误：Product["price"] 会得到 error TS2339: Property 'price' does not exist on type 'Product'。

可选属性包含 undefined

开启 strictNullChecks 时（strict 下默认开启），可选属性的类型包含 undefined，它的索引访问类型也一样：

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

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

要去掉 undefined，就把它包起来：NonNullable<Profile["nickname"]> 是 string。

用 T[number] 获取数组元素类型

数组是用数字索引的，所以用 number 索引一个数组类型就能得到元素类型。它还能穿过好几层：

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

当一个类型来自你无法控制的地方时，比如自动生成的 API 客户端，这种写法就很有用：ApiResponse["data"]["users"][number] 不需要任何人导出，就能拿到用户类型。

元组：按位置索引

元组类型可以用具体的位置来索引，用 number 得到所有元素类型的联合，用 "length" 得到它的长度（一个字面量类型）：

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]：从 const 数组得到联合类型

实际开发中最常见的用法：把允许的值列表保存为一个数组（这样运行时可以遍历它），再从中派生出联合类型（这样编译器可以检查它）。

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

这里有两个关键点。as const 把数组变成由字面量类型组成的只读元组；没有它，ROLES 就是 string[]，(typeof ROLES)[number] 也只是 string。然后 typeof 把值变成类型，[number] 把它的元素收集成一个联合类型。括号是可选的（typeof ROLES[number] 的意思相同），但加上括号能让运算顺序一目了然。

检查字符串是否在数组中

这个只读元组有一个让人意外的地方：它的 includes 方法只接受元素类型，所以你不能把任意字符串传给它：

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

检查时把数组放宽为 readonly string[]，并把函数改成一个类型守卫，这样检查成功后值就会被收窄：

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

这种模式让一个列表同时承担两项工作：运行时检查使用这个数组，类型也从它派生而来，所以两者永远不会脱节。

泛型中的索引访问：T[K]

在泛型中，配合 K extends keyof T 使用的 T[K]，就是调用者选中的那个属性的类型：

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

正是 K extends keyof T 这个约束让 T[K] 合法。没有它，TypeScript 无法知道 K 是 T 的键，会报告 error TS2536: Type 'K' cannot be used to index type 'T'。

语法一览

索引永远是类型。当 key 是一个 const 变量时，Person[key] 会因两个错误而失败：error TS2538: Type 'key' cannot be used as an index type. 和 error TS2749: 'key' refers to a value, but is being used as a type here. Did you mean 'typeof key'?。