인덱스드 엑세스 타입

인덱스드 엑세스 타입은 인덱스를 이용해 다른 타입내의 특정 프로퍼티의 타입을 추출하는 타입이다.

인덱스드 엑세스 타입은 객체, 배열, 튜플에 사용할 수 있다.

객체 프로퍼티의 타입 추출하기

// 게시글을 표현하는 객체 타입

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

// 게시글

const post: Post = {
  title: "게시글 제목",
  content: "게시글 본문",
  author: {
    id: 1,
    name: "woodstock",
  },
};

// 작성자의 이름과 아이디를 붙여서 출력하는 함수

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

이 때, 위와같이 함수의 매개변수의 타입을 정의하면 나중에 Post타입의 author프로퍼티의 타입이 수정될 때 매개변수의 타입도 같이 수정해줘야 하는 번거로움이 생긴다.

// 번거로운 상황 발생

interface Post {
  title: string;
  content: string;
  author: {
    id: number;
    name: string;
    age: number; // 추가
  };
}

function printAuthorInfo(author: { id: number; name: string, age: number }) {
	// age 프로퍼티도 추가
  console.log(`${author.id}-${author.name}`);
}

(...)

이럴 때 다음과 같이 인덱스드 엑세스 타입을 이용해 Post에서 author프로퍼티의 타입을 추출해 사용하면 편리하다.

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

이 때, 대괄호 속에 들어가는 String Literal타입인 "author"를 인덱스라고 부르며, 이 인덱스를 이용해 특정 타입에 접근한다고 하여 인덱스드 엑세스 타입이라 부르는 것이다.

아래와 같이 인덱스를 중첩하여 사용할 수도 있다.

function printAuthorInfo(author: Post["author"]['id']) {
	// author 매개변수의 타입은 number 타입이 됨
  console.log(`${author.id} - ${author.name}`);
}

주의할 점은 인덱스에는 값이 아닌 타입만 들어갈 수 있다는 것이다.

위와같이 “author”를 문자열 값으로 다른 변수에 저장하고 인덱스로 사용하려고 하면 오류가 발생한다.

또한 다음과 같이 인덱스에 존재하지 않는 프로퍼티 이름을 써도 오류가 발생한다.

배열 요소의 타입 추출하기

인덱스드 엑세스 타입은 객체 프로퍼티의 타입 뿐만 아니라 특정 배열의 요소 타입을 추출하는데에도 이용할 수 있다.

앞서 만든 Post타입을 다음과 같이 PostList배열 타입으로 수정하였다.

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

그리고 인덱스드 엑세스 타입을 이용해 다음과 같이 이 PostList배열 타입에서 하나의 요소의 타입만 뽑아올 수 있다.

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

PostList[number]는 PostList 배열 타입으로부터 요소의 타입을 추출하는 인덱스드 엑세스 타입이다.

이렇듯 배열의 요소 타입을 추출할 때에는 인덱스에 number 타입을 넣어주면 된다.

또, 인덱스에 다음과 같이 Number Literal타입을 넣어도 된다. 숫자와 관계없이 모두 Number 타입을 넣은 것과 동일하게 동작한다.

당연히, 아래와 같이 변수를 하나 만들어 넣으면 에러가 발생한다. 타입이 아닌 변수이기 때문이다.

이제 에러가 발생하는 함수 부분도 알맞게 수정해주면 된다.

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

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

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

튜플의 요소 타입 추출하기

튜플의 각 요소들의 타입또한 다음과 같이 인덱스드 엑세스 타입으로 쉽게 추출할 수 있다.

type Tup = [number, string, boolean];

type Tup0 = Tup[0];

type Tup1 = Tup[1];

type Tup2 = Tup[2];

한 가지 주의할 점은 튜플에 인덱스드 액세스 타입을 사용할 때, 구체적인 인덱스(예: 0, 1, 2) 대신 number 타입을 사용하면 TypeScript는 튜플을 배열처럼 처리한다.

이 경우, 튜플 내 모든 요소의 타입을 유니언 타입으로 반환하며, 이는 튜플이 고정된 길이의 배열로 간주되기 때문이다.

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