이번에는 타입스크립트의 배열(Array) 과 튜플(Tuple) 타입에 대해 살펴본다. 배열은 자바스크립트의 배열과 크게 다르지 않지만, 튜플은 자바스크립트에는 없는 타입스크립트만의 특별한 타입이다.

1. 배열 (Array)

타입스크립트에서 배열 타입을 정의하는 방법은 크게 두 가지가 있다.

1-1. 기본 타입 정의 (type[])

가장 일반적인 방법은 변수명 뒤에 타입[] 형태로 정의하는 것이다.

let numArr: number[] = [1, 2, 3];
let strArr: string[] = ["hello", "im", "taemmi"];

1-2. 제네릭 문법 (Array<type>)

Array<배열요소타입> 형태로도 정의할 수 있다. 꺾쇠(< >)와 함께 타입을 작성하는 것을 제네릭(Generic) 이라고 부른다.

let boolArr: Array<boolean> = [true, false, true];

Note: 두 방식은 기능상 차이가 없으나, 보통 타이핑이 더 간편한 첫 번째 방식(type[])을 주로 사용한다.

1-3. 다양한 타입의 요소를 갖는 배열 (Union Type)

배열 안에 숫자와 문자열이 동시에 들어가야 한다면 어떻게 해야 할까? 이럴 때는 소괄호와 바(|)를 이용해 유니온(Union) 타입으로 정의하면 된다.

// string 또는 number가 들어갈 수 있는 배열
let multArr: (string | number)[] = [1, "hello"];

• (string | number): 배열의 요소가 문자열이거나 숫자여야 함을 의미한다.

1-4. 다차원 배열

배열 안에 배열이 들어가는 2차원 이상의 배열은 []를 연달아 작성하여 정의한다.

let doubleArr: number[][] = [
  [1, 2, 3],
  [4, 5],
];

2. 튜플 (Tuple)

튜플은 자바스크립트에는 없는 개념으로, 길이와 각 요소의 타입이 고정된 배열을 의미한다.

2-1. 튜플 정의하기

일반 배열과 달리 대괄호 [] 안에 각 인덱스별로 들어갈 타입을 명시한다.

// 길이가 2이고, 각각 number 타입인 튜플
let tup1: [number, number] = [1, 2];

// 길이가 3이고, 순서대로 number, string, boolean인 튜플
let tup2: [number, string, boolean] = [1, "2", true];

이렇게 정의하면 정해진 순서와 타입, 그리고 길이를 엄격하게 지켜야 한다.

2-2. 튜플 사용 시 주의사항 (배열 메서드)

튜플은 컴파일되면 결국 자바스크립트의 배열(Array) 로 변환된다. 따라서 push나 pop 같은 배열 메서드를 사용하면 고정된 길이를 무시하고 요소를 추가하거나 삭제할 수 있다.

let tup1: [number, number] = [1, 2];

// ❌ 에러를 뱉지 않음 (런타임에서는 배열이기 때문)
tup1.push(1); 
tup1.push(1);

타입스크립트가 이런 메서드 호출까지 막아주지는 못하므로, 튜플을 쓸 때는 배열 메서드 사용에 각별히 주의해야 한다.

2-3. 튜플은 언제 쓸까?

예를 들어 회원 정보를 저장하는 2차원 배열이 있다고 가정해보자. [이름, 아이디] 순서로 저장하고 싶다.

일반 배열을 쓴다면 실수로 순서를 바꿔 넣어도 자바스크립트는 알아채지 못한다.

// JS 방식 (실수 가능성 있음)
const users = [
  ["탬니", 1],
  ["홍길동", 2],
  [3, "아무개"], // ❌ 순서가 바뀌었지만 에러 없음
];

하지만 튜플을 사용하면 이러한 실수를 즉시 잡아낼 수 있다.

// TS 튜플 사용
const users: [string, number][] = [
  ["탬니", 1],
  ["홍길동", 2],
  // [3, "아무개"], // ❌ 컴파일 에러 발생! (순서 틀림)
];

이처럼 데이터의 순서와 타입이 중요한 경우 튜플을 사용하면 훨씬 안전하게 코드를 작성할 수 있다.

요약

1. 배열: number[] 혹은 Array<number>로 정의한다. 유니온 타입을 써서 여러 타입을 담을 수도 있다.
2. 튜플: 길이와 타입이 고정된 배열이다 ([string, number]).
3. 주의: 튜플도 결국 배열이라 push 등의 메서드에는 뚫릴 수 있으니 주의해서 사용하자.