인덱스 접근 타입
인덱스 접근 타입 (Indexed Access Types)
객체 타입에서 특정 프로퍼티의 타입만 따로 꺼내 쓰고 싶을 때가 있어요. 인덱스 접근 타입은 Type["age"] 같은 문법으로 다른 타입의 특정 프로퍼티 타입을 조회해 줍니다. 마치 객체에서 값을 꺼내듯, 타입에서 타입을 꺼내는 셈이죠.
출처: TypeScript 핸드북
인덱스 접근 타입을 사용하면 다른 타입의 특정 프로퍼티를 조회할 수 있어요.
type Person = { age: number; name: string; alive: boolean };
type Age = Person["age"];
// ^?
인덱싱에 쓰이는 타입 자체도 타입이기 때문에, 유니온이나 keyof, 또는 완전히 다른 타입을 사용할 수도 있어요.
type Person = { age: number; name: string; alive: boolean };
// ---cut---
type I1 = Person["age" | "name"];
// ^?
type I2 = Person[keyof Person];
// ^?
type AliveOrName = "alive" | "name";
type I3 = Person[AliveOrName];
// ^?
존재하지 않는 프로퍼티를 인덱싱하려고 하면 에러가 나는 것도 확인할 수 있어요.
// @errors: 2339
type Person = { age: number; name: string; alive: boolean };
// ---cut---
type I1 = Person["alve"];
임의의 타입으로 인덱싱하는 또 다른 예시로, number를 사용해 배열 요소의 타입을 얻어올 수 있어요. 이걸 typeof와 결합하면 배열 리터럴의 요소 타입을 편리하게 잡아낼 수 있습니다.
const MyArray = [
{ name: "Alice", age: 15 },
{ name: "Bob", age: 23 },
{ name: "Eve", age: 38 },
];
type Person = typeof MyArray[number];
// ^?
type Age = typeof MyArray[number]["age"];
// ^?
// Or
type Age2 = Person["age"];
// ^?
인덱싱에는 타입만 쓸 수 있어요. 즉 const로 만든 변수 참조는 사용할 수 없습니다.
// @errors: 2538 2749
type Person = { age: number; name: string; alive: boolean };
// ---cut---
const key = "age";
type Age = Person[key];
다만 비슷한 방식의 리팩터링을 위해 타입 별칭을 사용할 수는 있어요.
type Person = { age: number; name: string; alive: boolean };
// ---cut---
type key = "age";
type Age = Person[key];