인덱스드 엑세스 타입

다음 사진처럼 게시글에 대한 타입이 정의되어 있고, 게시글이 하나 쓰였다고 생각해보자.

게시글 객체

 

그리고 아래와 같이 해당 게시글의 작성자를 출력하는 메서드를 만들고자 한다.

게시글 작성자 출력

 

앞서 배운 지식들로부터 매개변수에는 타입 추론이 적용되지 않고, 우리가 직접 정의해줘야 함을 배웠다. author라는 프로퍼티에는 id와 name 프로퍼티가 추가로 필요하니 다음과 같이 정의해보겠다.

매개변수 타입 정의

 

그런데 위와 같이 작성할경우 author 프로퍼티의 변화가 생길경우 printAuthorInfo 메서드도 같이 수정해야하는 불편함이 있다. 이를 해결하기 위해 인덱스드 엑세스 방식을 적용할 수 있다.

어떻게 적용할까?

아래 사진처럼 Post 타입에 author 프로퍼티를 명시해줄 경우 id와 name을 정의받는 타입으로 정의할 수 있다.

인덱스드 엑세스

 

이런식으로 우리가 설정한 객체의 하위 객체 타입을 정의하고 싶을 때 인덱스드 엑세스 방식을 사용할 수 있다.

특히, 배열 형태의 타입에서 적용이 좋다.

배열 타입

 

interface가 배열 타입을 정의하기 까다로운 부분이 있어 더 쉬운 type 별칭을 사용했다. 보다시피 게시글 객체인 post에 Post[number]를 명시해주면서 Post 배열의 한 요소에 대한 타입을 정의받았다.

튜플 타입에서의 인덱스드 엑세스

배열에서의 사용성이 좋은만큼 튜플에서도 사용성이 좋다. 다음과 같이 여러 타입이 정의된 튜플에서 한 가지 요소의 타입만 꺼내올 수 있는 특징이 있다.

튜플 타입

 

위 예시에서 튜플의 0번, 1번, 2번 인덱스로부터 한 가지 타입을 꺼내왔다. 만약 이를 한꺼번에 꺼낸다면 어떨까?

아래 코드를 보자.

튜플 2

 

정답은 유니온 타입으로 정의가 된다. 튜플에서 여러 타입을 조합할 때 사용하기 편할 것 같다.

참고자료

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런