https://blog.cometkim.kr/posts/typescript-tuples/

지난 4월 말에 TypeScript Korea 그룹에서 타입스크립트에게 내 의도를 이해시키는 방법 이라는 주제로 발표했었습니다.

그 때는 막상 발표를 정해놓고 주제를 잘 정리하지 못해서 두서없이 이런저런 얘기를 했었습니다. 대략 어떤 내용이였냐면

• 타입스크립트가 타입을 추론하는 방식
• 타입 추론이 안전한 코드 작성에 어떻게 도움이 되는지
• 타입 추론을 더 쉽게 사용하기 위한 Type-level 유틸리티를 만드는 방법 (feat. infer)
• 안전하지 않은 타입을 안전한(컴파일러가 추론 가능한) 타입으로 캐스팅 하는 방법
• 튜플 타입 다루는 법

이 중에서 튜플 타입을 다루는 방법들에 대해서는 나중에 꼭 글을 써야지라고 생각만 하고 어기적거리고 있다보니 어느새 5개월이 지나고, 어느새 TypeScript 4.0이 출시되었으며, Variadic tuple이라는 새로운 문법의 등장으로 많은 변화가 생겼습니다.

상황이 이렇게 되니 한 편으로는 제 게으름에 대해 자괴감도 들고, 또 한 편으로는 새기능 소개를 한꺼번에 할 수 있으니 잘 됐다는 생각도 들고 그러네요.

이 글은 튜플 형태의 타입 정의 특성을 가볍게 다루기도 하지만 Conditional typing과 infer 키워드를 많이 활용하기 때문에 해당 기능에 대한 이해도가 어느정도 필요합니다. (타입스트립트의 타입 시스템을 타의 추종이 불가능할 정도로 강력하게 만들어주는 고급 기능이자 제가 아직 TypeScript를 사용하는 유일한 이유이기도 합니다)

type tuple = readonly [1, 'hello', false];

일반적으로 튜플은 불변 구조이기 때문에 readonly 키워드를 명시적으로 수식했습니다. 사실 어떤 인덱스에 어떤 자료가 들어있는지 기술한 시점부터 readonly 키워드가 명시적으로 있던지 없던지 그 성질은 동일합니다.

// $ExpectType readonly ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
const days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'] as const;

이렇게 as const를 기술하면 쉽게 값의 정의로부터도 튜플 타입을 가져올 수 있습니다.

이렇게 정의된 튜플 타입의 값은 몇가지 고유한 성질을 가집니다.

1. Array 인터페이스를 만족하는 객체이기도 합니다.
2. 인덱스 타입도 불변이며, 컴파일러가 그 정확한 값을 기억하고 있습니다.

즉, 위에서 정의한 days 의 타입은 이런 형태로도 기술될 수 있습니다.