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

利点は、信頼できる情報源が1つになることです。Age は number の2つ目のコピーではありません。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] と書けば、誰も export していないユーザーの型に名前を付けられます。

タプル: 位置でインデックスアクセスする

タプル型は、特定の位置でインデックスアクセスでき、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

2つの部分がこれを可能にしています。as const が配列をリテラル型の readonly タプルにします。これがないと ROLES は string[] で、(typeof ROLES)[number] はただの string です。そして typeof が値を型に変え、[number] がその要素をユニオン型にまとめます。かっこは省略でき（typeof ROLES[number] も同じ意味です）ますが、あると演算の順序がはっきりします。

文字列を配列と照合する

その readonly タプルには意外な点が1つあります。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

このパターンなら、1つの一覧で両方の役割を果たせます。実行時のチェックは配列を使い、型はそこから作られるので、両者がずれることはありません。

ジェネリクスの中のインデックスアクセス: 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[]

T[K] が正しい書き方になるのは K extends keyof T という制約があるからです。これがないと、K が T のキーであることをTypeScriptは知りようがなく、error TS2536: Type 'K' cannot be used to index type 'T' を報告します。

構文の一覧

インデックスは常に型です。key が const の変数である Person[key] は、2つのエラーで失敗します: 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'?。