[Typescript] Tuple types

🎯 Goals

• 튜플 타입의 정의와 특징을 이해한다.
• 튜플 타입을 언제 쓰는지 알고 쓸 수 있다.

정의

원소의 갯수와 원소별 타입이 정해진 배열

우리는 js가 서로 다른 타입의 원소가 배열에 담길 수 있다는 사실을 알고있다.
(사실상 js 에서 배열은 index 번호를 키로갖는 해시맵에 불과하기 때문에)

When to use?

• 정의 그대로 원소 갯수, 타입이 정해진 '튜플 (레코드)'를 사용하고자 할 때
• API 정의를 유연하게 property 이름을 정의할 필요가 없을 때
  ex) React's useState
const [error, setError] = useState(null);
• Destructuring 과 동시에 속성 이름을 제멋대로 짓고자 할 때

고정된 property 명과 객체단위의 사용이 필요할 땐 다음과 같은 코드가 정형화된 패턴이다.

Object Version

interface Point {
    x: number;
    y: number;
}

const point1 : Point = {x: 5, y: 3};

// { x: 5, y: 3 }
console.dir(point1);

---

이렇게 하면 어떨까?

Tuple version

type TuplePoint = [number, number, number?];
const [x, y, z] : TuplePoint = [10, 12];

// x: 10, y: 12, z: undefined
console.log(`x: ${x}, y: ${y}, z: ${z}`);

point은 객체, resultType 은 배열이라는 차이점이 있다.
또, destructuring 시 속성의 이름이 원래 객체의 프로퍼티와 일치할 필요가 없다. 또 spread, optional type도 설정 가능하다.

위의 예제에선 z 좌표가 없어도 괜찮다.

또, Promise.all의 모든 결과값을 한줄로 받아올 때도 요긴하게 쓰인다.

Promise.all

(async ()=>{
    const [name, age, date] = await Promise.all([
        Promise.resolve('falcon'),
        Promise.resolve(33),
        Promise.resolve(new Date())
    ]);

  // falcon 33 2021-09-09T07:34:24.060Z
    console.log(name, age, date)
})();

---

🔗 Reference

• Typescript document
• powerful tuple types - git connected