본문 바로가기
카테고리 없음

TypeScript의 배열과 튜플 타입 마스터하기 (9강)

by mystory55776 2025. 5. 15.

TypeScript의 배열과 튜플 타입 마스터하기

TypeScript는 JavaScript의 배열과 튜플을 **강력한 타입 시스템**을 통해 더 안전하고 예측 가능한 방식으로 다룰 수 있게 해줍니다. 배열과 튜플은 각각 **동일한 타입의 값들**을 다룰 수 있지만, 그 특성과 사용 방법은 조금 다릅니다. 이번 강의에서는 TypeScript에서 배열과 튜플의 타입을 정확히 이해하고, 이들을 효과적으로 사용하는 방법을 마스터해보겠습니다.

배열 타입이란?

**배열(Array)**은 여러 개의 **동일한 타입**의 값을 **순차적으로** 저장하는 자료형입니다. TypeScript에서 배열을 정의할 때는 배열의 각 요소가 **같은 타입**이어야 한다는 규칙을 적용합니다. 배열의 타입을 정의하는 방법은 매우 직관적입니다. 

let numbers: number[] = [1, 2, 3, 4, 5];
let strings: string[] = ["apple", "banana", "cherry"];

위 예제에서 numbers 배열은 **숫자 타입(number)**만을 허용하고, strings 배열은 **문자열 타입(string)**만을 허용합니다. TypeScript는 배열의 타입을 자동으로 추론하여 해당 배열에 다른 타입의 값을 넣으려고 하면 오류를 발생시킵니다.

배열 타입 정의 방법

배열의 타입을 정의하는 방법에는 **두 가지**가 있습니다. 첫 번째는 **배열 리터럴 타입**을 사용하는 방법이며, 두 번째는 **제네릭 배열 타입**을 사용하는 방법입니다.

배열 리터럴 타입 사용

let fruits: string[] = ["apple", "banana", "orange"];

위와 같이 **`string[]`** 형식을 사용하여 배열의 타입을 정의할 수 있습니다. 이 방법은 배열 안의 모든 요소가 동일한 타입을 가질 때 매우 직관적입니다.

제네릭 배열 타입 사용

let scores: Array = [95, 82, 77, 100];

제네릭 형식을 사용하여 배열의 타입을 정의할 수도 있습니다. Array와 같이 제네릭을 사용하면, 배열의 타입을 좀 더 명확히 표현할 수 있습니다.

튜플 타입이란?

**튜플(Tuple)**은 **고정된 길이**의 배열로, 각 요소의 타입이 서로 다를 수 있다는 특징을 가집니다. 즉, 튜플은 **정해진 순서대로 여러 타입의 값을 담을 수 있는 배열**입니다. 튜플을 사용하면, 배열의 각 요소가 무엇을 나타내는지 명확히 정의할 수 있습니다. 

let person: [string, number] = ["John", 30];

위 예제에서 person 튜플은 **첫 번째 요소**는 **문자열(string)**이고, **두 번째 요소**는 **숫자(number)**로 정의됩니다. 이처럼 튜플은 배열과 유사하지만, **고정된 길이**와 **각 요소의 타입**이 다를 수 있다는 점에서 차이가 있습니다.

튜플 타입 정의 방법

튜플 타입은 **배열의 요소**가 **고정된 순서**로 정의되며, 각 요소가 서로 다른 타입일 수 있습니다. 튜플을 정의할 때는 배열 리터럴 타입을 사용하는 것처럼, 요소별로 타입을 지정합니다. 

let user: [string, number, boolean] = ["Alice", 25, true];

위 예제에서 user 튜플은 **문자열(string)**, **숫자(number)**, **불리언(boolean)** 타입의 값을 각각 가집니다. 튜플의 길이나 타입을 변경하면 TypeScript는 오류를 발생시킵니다.

배열과 튜플의 차이점

배열과 튜플은 매우 비슷해 보일 수 있지만, 중요한 차이점이 존재합니다. **배열**은 모든 요소가 동일한 타입을 가지며, 길이가 **동적으로 변화**할 수 있습니다. 반면, **튜플**은 길이가 고정되어 있고, **각각의 요소가 다른 타입**을 가질 수 있습니다.

  • 배열: 요소가 동일한 타입을 가지며 길이가 가변적입니다. 모든 요소가 같은 타입이어야 합니다.
  • 튜플: 요소가 고정된 개수를 가지고, 각 요소의 타입이 다를 수 있습니다. 길이와 순서가 중요합니다.

배열과 튜플 활용 예시

배열과 튜플은 다양한 상황에서 유용하게 사용됩니다. 아래는 배열과 튜플을 활용한 몇 가지 예시입니다.

배열을 활용한 예시

let shoppingList: string[] = ["Milk", "Eggs", "Bread"];
shoppingList.push("Butter"); // 배열에 요소 추가
console.log(shoppingList);

배열은 주로 **동일한 타입의 값을 여러 개 저장**할 때 유용합니다. 예를 들어, 쇼핑 리스트를 배열로 관리하는 방식이 될 수 있습니다.

튜플을 활용한 예시

let product: [string, number, boolean] = ["Laptop", 1200, true];
console.log(`Product: ${product[0]}, Price: ${product[1]}, Available: ${product[2]}`);

튜플은 **서로 다른 타입**의 값을 **고정된 순서**로 저장할 때 유용합니다. 예를 들어, 제품 정보와 같은 데이터를 저장할 때 튜플을 사용할 수 있습니다.

배열과 튜플에 유용한 고급 기능들

배열과 튜플을 더욱 효율적으로 사용하기 위해 TypeScript는 몇 가지 고급 기능을 제공합니다. 이 기능들을 잘 활용하면 코드의 안정성과 가독성을 더욱 향상시킬 수 있습니다.

배열의 메서드 사용

배열에는 **push**, **pop**, **map**, **filter** 등 다양한 메서드가 제공되어 데이터를 처리할 때 매우 유용합니다. TypeScript는 배열의 타입을 추론하여 안전하게 메서드를 사용할 수 있게 합니다.

튜플의 타입 안전성

튜플은 **고정된 길이**와 **정확한 타입**을 지정할 수 있어, 잘못된 값이나 순서에 의한 오류를 예방할 수 있습니다. 이를 통해 데이터의 **타입 안전성**을 보장할 수 있습니다.

배열과 튜플 선택 가이드

배열과 튜플은 각기 다른 상황에서 유용하게 사용됩니다. 언제 배열을 사용하고, 언제 튜플을 사용해야 하는지에 대한 간단한 가이드를 제공하겠습니다.

  • 배열 사용: 동일한 타입의 여러 값을 순차적으로 저장할 때.
  • 튜플 사용: 각 요소의 타입이 다르고, **고정된 길이**를 갖는 데이터를 처리할 때.

마무리: 배열과 튜플의 중요성

배열과 튜플은 TypeScript에서 데이터를 처리할 때 매우 중요한 자료형입니다. 배열은 여러 개의 동일한 타입 값을 순차적으로 다룰 때 유용하고, 튜플은 서로 다른 타입의 값을 고정된 순서대로 다룰 때 매우 유용합니다. 이 두 자료형을 잘 활용하면 코드의 안정성과 가독성을 크게 향상시킬 수 있습니다.

TypeScript의 타입 시스템을 잘 활용하여, 더 안전하고 효율적인 코드를 작성해보세요!

다음 강의에서는 TypeScript에서 함수 타입과 제네릭을 활용하는 방법을 배워보겠습니다.

티스토리툴바