[TypeScript] 튜플(Tuple): 다양한 타입을 하나로 관리하기

튜플의 기본 개념

튜플은 각 인덱스마다 특정 타입을 가진 요소들로 구성된 배열입니다. 일반 배열과 달리 길이와 타입이 고정되어 있어, 실수로 잘못된 데이터를 추가하거나 순서를 혼동하는 일을 방지할 수 있습니다.

// 문자열, 숫자, 불린 값을 가지는 튜플 예제
let tupleExample: [string, number, boolean] = ["TypeScript", 2024, true];
console.log(tupleExample);
// 출력 예시: [ 'TypeScript', 2024, true ]

튜플 선언 후 요소 할당하기

let userData: [number, string];
userData = [101, "지민"];
console.log(`ID: ${userData[0]}, 이름: ${userData[1]}`);
// 출력: ID: 101, 이름: 지민

잘못된 초기화 방지

// userData = [101, "지민", true]; // 오류: 길이와 타입이 맞지 않음

튜플 요소 접근과 수정

튜플은 배열처럼 인덱스로 접근하며, 타입에 맞는 값으로만 수정할 수 있습니다.

let task: [string, number] = ["보고서 작성", 2];
console.log(`작업: ${task[0]}, 우선순위: ${task[1]}`);
// 출력: 작업: 보고서 작성, 우선순위: 2

task[0] = "프레젠테이션 준비";
console.log(`수정된 작업: ${task[0]}`);
// 출력: 수정된 작업: 프레젠테이션 준비

// task[0] = 3; // 오류: string 타입에 number 할당 불가

튜플과 배열 메서드

튜플은 배열의 서브타입이므로 배열 메서드를 사용할 수 있습니다. 다만, 선언된 튜플 타입과 맞는 값이 추가되어야 합니다.

let location: [number, number] = [37.5665, 126.9780]; // 위도, 경도
location.push(100); // 타입 체크 우회 가능
console.log(location);
// 출력: [37.5665, 126.9780, 100]

location.pop();
console.log(`복구된 위치: ${location}`);
// 출력: 복구된 위치: 37.5665,126.9780

튜플의 구조 분해와 함수 활용

튜플은 구조 분해 할당을 통해 요소를 쉽게 추출하거나, 함수에서 여러 값을 반환하거나 전달할 때 유용합니다.

구조 분해

let event: [string, Date] = ["회의", new Date()];
const [title, date] = event;
console.log(`이벤트: ${title}, 날짜: ${date.toLocaleDateString()}`);
// 출력: 이벤트: 회의, 날짜: 2025. 2. 23 (현재 날짜 기준)

함수 반환값

function getWeather(): [number, string] {
  return [25, "맑음"];
}

const [temp, condition] = getWeather();
console.log(`온도: ${temp}℃, 날씨: ${condition}`);
// 출력: 온도: 25℃, 날씨: 맑음

튜플을 함수의 매개변수로 사용

튜플을 매개변수로 전달하면, 고정된 순서와 타입을 가진 여러 값을 한 번에 전달할 수 있어 함수의 사용성이 향상됩니다.

let coords: [number, number, number] = [10, 20, 30];

function printCoordinates(point: [number, number, number]): void {
  console.log(`X: ${point[0]}, Y: ${point[1]}, Z: ${point[2]}`);
}

printCoordinates(coords);
// 출력 예시: X: 10, Y: 20, Z: 30