여러분은 Indexed Access Types을 사용하시나요?

[jhlee0409]

고민

어떤 타입의 특정 프로퍼티에 접근하여 타입을 일부분 가져올 때 어떠한 방식을 사용해야하지? 생각할 때가 종종 있는데요
특정 코드들이나 아티클을 보면 Indexed Access Types를 사용하는 경우가 종종 보이더라구요
단순한 궁금증이지만 여러분들은 어떤 상황에서 어떤 방식을 사용하시나요?

코드

// ./types.ts

export type Bookmark = {
    id: number;
    title: string;
    created_at: string;
    // ... 더 많은 필드들
  };

 export type BookmarkResponseType = {
    bookmarks: Bookmark[];
  };

// Indexed Access Types
import type { BookmarkResponseType } from "./types.ts"
type Bookmark = BookmarkResponseType["bookmarks"][number]

// import specific type at types.ts
import type { Bookmark } from "./types.ts"

참고 자료

No response

[raon0211]

토스에서도 타입을 한 번만 정의해서 모든 곳에서 한 번에 수정되도록 하고 싶을 때는 Indexed Access Type을 사용해요. 말씀하신 유스케이스와 완전히 동일하네요.

[haryung-lee]

API 관련 타입들을 한곳에 정의해두고, 실제 api를 정의하는 곳에서 API['getUser']['request'] 식으로 가져와 사용했던 경험이 있어요. getUserRequest, getUserResponse ... 와 같이 네이밍 하는 것보다 가독성이 좋다고 생각해서 적용해봤습니다.

[JAAAAAEMKIM]

위에 말씀해주신 경우들 외에도 생각나는 특수한 케이스 중에, 유니언 타입에서의 타입 추론을 위해 Indexed Access Type이 필요한 경우가 있었어요.

type UnionRecord = 
    | { kind: "n", v: number, f: (v: number) => void }
    | { kind: "s", v: string, f: (v: string) => void }
    | { kind: "b", v: boolean, f: (v: boolean) => void };

function processRecord(rec: UnionRecord) {
    rec.f(rec.v);  // Error, 'string | number | boolean' not assignable to 'never'
}

rec.v의 타입은 rec.f의 인자로 서로 연관되어 있습니다.
하지만 위 예시에선 타입체커가 rec.f, rec.v의 관계를 알지 못하고 단순히 분배한 결과로 타입을 검증하고 있어서 실패합니다.

이 경우, MappedType과 Indexed Access Type의 조합으로 타입 검사가 좀 더 정확히 되도록 할 수 있습니다.

type RecordMap = { n: number, s: string, b: boolean };
type UnionRecord<K extends keyof RecordMap = keyof RecordMap> = { [P in K]: {
    kind: P,
    v: RecordMap[P],
    f: (v: RecordMap[P]) => void
}}[K];

function processRecord<K extends keyof RecordMap>(rec: UnionRecord<K>) {
    rec.f(rec.v);  // Ok
}

번역 글