본문 바로가기

프로그래밍기초/typescript

#04 TypeScript - 배열과 튜플

튜플

튜플(Tuple)은 길이와 각 위치의 타입이 고정된 배열이다.

  • 몇 개의 요소를 가지는지 정해져 있고
  • 각 인덱스마다 타입이 다르거나 의미가 정해진 경우에 사용한다.
  • let user: [number, string] = [1, "Kim"];

 

튜플의 핵심 특징

1) 길이가 고정된다.

let t: [number, string];

t = [1, "Kim"];      // 정상
t = [1];             // ❌ 에러
t = [1, "Kim", 30];  // ❌ 에러

2) 위치별 타입이 고정된다

let t: [number, string];

t[0] = 10;       // 정상
t[1] = "Lee";    // 정상
t[1] = 10;       // ❌ 에러
  • 인덱스의 의미가 타입으로 보장됨

3) 튜플의 실질적 사용 이유

튜플은
“이 값들은 항상 이 순서와 이 의미를 가진다”
라는 것을 타입으로 강제하기 위해 사용한다.

1) 좌표

let position: [number, number] = [100, 200];
  • [x, y] 의미가 명확함
    2) 상태 + 메세지
  • type Result = [boolean, string];

let success: Result = [true, "성공"];
let fail: Result = [false, "실패"];

3) 함수 반환값 여러 개
```ts
function getUser(): [number, string] {
  return [1, "Kim"];
}

 

 

readonly 튜플

튜플도 변경 불가능하게 만들 수 있다.

let t: readonly [number, string] = [1, "Kim"];

t[0] = 2; // ❌ 에러
  • 불변 데이터 보장
  • 함수 반환값에 매우 유용

 

튜플과 구조 분해 할당

튜플은 구조 분해 시 강력하다

let user: [number, string] = [1, "Kim"];

const [id, name] = user;
// id: number
// name: string
  • 각 변수의 타입이 정확히 추론됨

 

주의사항

push가 가능한 문제(구버전 기준)

let t: [number, string] = [1, "Kim"];
t.push("Lee"); // 런타임 가능 (권장 ❌)
  • 타입 시스템의 한계로 발생하던 문제
  • 최신 TypeScript + readonly 사용 권장

 

튜플과 배열의 차이

구분배열(Array)튜플(Tuple)

길이 가변 고정
타입 동일 위치별 고정
용도 데이터 목록 구조화된 데이터
사용자 목록 좌표, 상태+메시지
// 배열
let arr: number[] = [1, 2, 3];

// 튜플
let point: [number, number] = [10, 20];

 

튜플과 배열 언제 무엇을 사용해야 할까?

상황추천

순서와 위치가 중요 튜플
의미가 명확한 키 필요 객체
짧고 고정된 데이터 튜플
확장 가능성 있음 객체
// 튜플
type RGB = [number, number, number];

// 객체
type Color = { r: number; g: number; b: number };

 

 

 

반응형