[TypeScript] 배열(Array)과 튜플(Tuple)

이번에는 타입스크립트의 배열(Array) 과 튜플(Tuple) 타입에 대해 살펴본다. 배열은 자바스크립트의 배열과 크게 다르지 않지만, 튜플은 자바스크립트에는 없는 타입스크립트만의 특별한 타입이다. 1. 배열 (Array) 타입스크립트에서 배열 타입을 정의하는 방법은 크게 두 가지가 있다. 1-1. 기본 타입 정의 (type[]) 가장 일반적인 방법은 변수명 뒤에 타입[] 형태로 정의하는 것이다. ts let numArr: number[] = [1, 2, 3]; let strArr: string[] = ["hello", "im", "taemmi"]; 1-2. 제네릭 문법 (Array<type>) Array<배열요소타입> 형태로도 정의할 수 있다. 꺾쇠(< >)와 함께 타입을 작성하는 것을 제네릭(Generic) 이라고 부른다. ts let boolArr: Array<boolean> = [true, false, true]; > Note: 두 방식은 기능상 차이가 없으나, 보통 타이핑이 더 간편한 첫 번째 방식(type[])을 주로 사용한다. > 1-3. 다양한 타입의 요소를 갖는 배열 (Union Type) 배열 안에 숫자와 문자열이 동시에 들어가야 한다면 어떻게 해야 할까? 이럴 때는 소괄호와 바(|)를 이용해 유니온(Union) 타입으로 정의하면 된다. ts // string 또는 number가 들어갈 수 있는 배열 let multArr: (string | number)[] = [1, "hello"]; - (string | number): 배열의 요소가 문자열이거나 숫자여야 함을 의미한다. 1-4. 다차원 배열 배열 안에 배열이 들어가는 2차원 이상의 배열은 []를 연달아 작성하여 정의한다. ts let doubleArr: number[][] = [ [1, 2, 3], [4, 5], ]; --- 2. 튜플 (Tuple) 튜플은 자바스크립트에는 없는 개념으로, 길이와 각 요소의 타입이 고정된 배열을 의미한다. 2-1. 튜플 정의하기 일반 배열과 달리 대괄호 [] 안에 각 인덱스별로 들어갈 타입을 명시한다. ts // 길이가 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 같은 배열 메서드를 사용하면 고정된 길이를 무시하고 요소를 추가하거나 삭제할 수 있다. ts let tup1: [number, number] = [1, 2]; // ❌ 에러를 뱉지 않음 (런타임에서는 배열이기 때문) tup1.push(1); tup1.push(1); 타입스크립트가 이런 메서드 호출까지 막아주지는 못하므로, 튜플을 쓸 때는 배열 메서드 사용에 각별히 주의해야 한다. 2-3. 튜플은 언제 쓸까? 예를 들어 회원 정보를 저장하는 2차원 배열이 있다고 가정해보자. [이름, 아이디] 순서로 저장하고 싶다. 일반 배열을 쓴다면 실수로 순서를 바꿔 넣어도 자바스크립트는 알아채지 못한다. ts // JS 방식 (실수 가능성 있음) const users = [ ["탬니", 1], ["홍길동", 2], [3, "아무개"], // ❌ 순서가 바뀌었지만 에러 없음 ]; 하지만 튜플을 사용하면 이러한 실수를 즉시 잡아낼 수 있다. ts // TS 튜플 사용 const users: [string, number][] = [ ["탬니", 1], ["홍길동", 2], // [3, "아무개"], // ❌ 컴파일 에러 발생! (순서 틀림) ]; 이처럼 데이터의 순서와 타입이 중요한 경우 튜플을 사용하면 훨씬 안전하게 코드를 작성할 수 있다. --- 요약 1. 배열: number[] 혹은 Array<number>로 정의한다. 유니온 타입을 써서 여러 타입을 담을 수도 있다. 2. 튜플: 길이와 타입이 고정된 배열이다 ([string, number]). 3. 주의: 튜플도 결국 배열이라 push 등의 메서드에는 뚫릴 수 있으니 주의해서 사용하자.