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]는 아무도 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

두 부분이 이를 가능하게 합니다. as const는 배열을 리터럴 타입의 readonly 튜플로 만듭니다. 없으면 ROLES는 string[]이고 (typeof ROLES)[number]는 그냥 string입니다. 그다음 typeof가 값을 타입으로 바꾸고, [number]가 그 요소들을 유니언으로 모읍니다. 괄호는 선택 사항이지만(typeof ROLES[number]도 같은 뜻), 연산 순서를 분명하게 해 줍니다.

문자열이 배열에 있는지 확인하기

이 readonly 튜플에는 의외의 점이 하나 있습니다. 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'?.