[TS] 인덱스드 액세스 타입

인덱스드 액세스 타입(Indexed Access Type)은 객체, 배열, 튜플 타입으로부터 특정 프로퍼티나 요소의 타입만 추출하는 타입이다.

객체 프로퍼티 타입 추출

게시글 작성자 정보를 출력하는 함수를 작성해보자.

interface Post {
  title: string;
  content: string;
  author: {
    id: number;
    name: string;
  };
}

function printAuthorInfo(author: { id: number; name: string }) {
  console.log(`${author.name}-${author.id}`);
}

 

만약 Post의 author 타입이 수정되면 함수의 매개변수 타입도 함께 수정해야 한다.

인덱스드 액세스 타입을 사용하면 이 문제를 해결할 수 있다.

function printAuthorInfo(author: Post["author"]) {
  console.log(`${author.name}-${author.id}`);
}

대괄호 안의 "author"를 인덱스라고 부른다. 이제 Post의 author 타입이 변경되면 자동으로 반영된다.

 

중첩 인덱스

인덱스를 중첩하여 더 깊은 프로퍼티의 타입을 추출할 수 있다.

function printAuthorId(id: Post["author"]["id"]) {
  // id의 타입은 number
  console.log(id);
}

 

주의사항

인덱스에는 타입만 들어갈 수 있다. 값은 사용할 수 없다.

존재하지 않는 프로퍼티 이름도 오류가 발생하다.

 

배열 요소 타입 추출

배열의 요소 타입을 추출할 때는 인덱스에 number타입을 사용한다.

type PostList = {
  title: string;
  content: string;
  author: {
    id: number;
    name: string;
    age: number;
  };
}[];

const post: PostList[number] = {
  title: "게시글 제목",
  content: "게시글 본문",
  author: {
    id: 1,
    name: "woodstock",
    age: 100,
  },
};

function printAuthorInfo(author: PostList[number]["author"]) {
  console.log(`${author.name}-${author.id}`);
}

 

Number Literal 타입(0, 1 등)을 넣어도 number 타입과 동일하게 동작한다.

 

변수를 넣으면 오류가 발생한다. 타입이 아닌 값이기 때문이다.

 

튜플 요소 타입 추출

튜플의 각 요소 타입을 개별적으로 추출할 수 있다.

type Tup = [number, string, boolean];

type Tup0 = Tup[0]; // number
type Tup1 = Tup[1]; // string
type Tup2 = Tup[2]; // boolean

 

number 타입을 인덱스로 사용하면 모든 요소 타입의 유니언을 반환한다.

type Tup3 = Tup[number]; // number | string | boolean