TS022. 타입스크립트 튜플 정리

튜플이란?

• 길이와 타입을 알고 있는 배열의 한 유형을 말한다.
• ex) 좌표는 2의 길이를 가진 number 타입 배열로 [number, number] 로 표현 가능하다.
• 튜플은 일반 배열과 달리 길이에 대한 정보를 알고 있으므로 범위를 넘어서는 인덱스에 접근했을 때 컴파일 타임에 에러가 표기된다.
• 당연히 일반 배열처럼 디스트럭처링도 가능하다.
• 튜플에는 옵셔널 요소가 있을 수 있다.
• 특정한 형태로 된 고정된 데이터 구조를 나타내거나 DB 행과 같은 것을 나타낼 때 매우 유용하다.

기본 튜플 선언 방법

const tuple: [number, string] = [30, "Jake"];
tuple.push("abc"); // push 로 수정이 된다는 게 흠임

let person: [string, number];
person = ["Alice", 30]; // Correct
// person = [30, "Alice"]; // Error: Type 'number' is not assignable to type 'string'

console.log(`Name: ${person[0]}, Age: ${person[1]}`); // Output: Name: Alice, Age: 30

person[1] = 31; // Correct
// person[1] = "Thirty-one"; // Error: Type 'string' is not assignable to type 'number'

튜플의 옵셔널 요소

let employee: [string, number, boolean?];
employee = ["Bob", 25]; // Optional element omitted
employee = ["Charlie", 28, true]; // Optional element included

나머지 연산자를 튜플에 적용하기

let numbers: [string, ...number[]] = ["Numbers", 1, 2, 3];

더 안전한 readonly 튜플 선언하기

const unmodifiableTuple: readonly [number, string] = [30, "Jake"];
unmodifiableTuple.push("abc"); // readonly 라서 에러가 남

일반 배열을 튜플로 취급되게 만들기

const user = [30, "jake"] as const;
// as const 때문에 type narrowing 이 일어나 readonly [30, "jake"] 로 타입추론이 된다.

튜플에 이름 짓기

• 값에 대한 의미를 더 알기 쉬워진다.
• 이를 Labeled Tuples 라고 하는데 타입스크립트 4.0 이상이 필요하다.

const namedTuple: [name: string, age: number] = ["jake", 30];

튜플을 튜플에 할당하기

• 튜플을 서로 할당할 때는 같은 형태끼리만 할당 가능하다.

let user1: [number, string] = [30, "jake"];
let user2: [string, number] = ["jake", 30];
let user3: [number, string] = [22, "jack"];

user1 = user3; // 정상
user1 = user2; // 에러 -> 같은 형태의 튜플이 아님

튜플과 배열의 관계

• 구체적인 타입을 덜 구체적인 타입으로 할당하는 것은 가능하다. (더 느슨하게 만듦)
• 덜 구체적인 타입을 더 구체적인 타입으로 할당하는 것은 불가능하다. (더 조일 수는 없음)

let nums: [number, number] = [1, 2];
let nums2: number[] = [1, 2, 3, 4, 5];
nums2 = nums; // 에러가 나지 않음. nums 는 사실 nums2 를 포괄하는 타입이기 때문에 상관이 없음 -> any 가 모든 타입을 포용하는 것과 마찬가지
nums = nums2; // 에러, [number, number] 는 number[] 보다 더 좁은 타입이라서 불가능.

다차원 튜플

• 다차원 배열과 동일하게 타입 정의를 하면 된다.

const tuple2D: [number, number][] = [
  [1, 1],
  [2, 2],
  [3, 3],
];