검색
검색
공개 노트 검색
회원가입로그인
TypeScript 정복하기: 초심자에서 전문가로

7장: 배열, 튜플, 열거형 다루기

배열, 튜플, 그리고 열거형의 모든 것

TypeScript를 마스터하려면 기본 데이터 구조의 정확한 이해가 필수다. 그 중에서도 배열, 튜플, 그리고 enum(열거형)은 실제 프로젝트에서 자주 등장하며, 각각의 강점을 올바르게 활용할 줄 아는지가 실력 차이를 만든다.

배열: 같은 타입의 값들을 한데 묶기

TypeScript의 배열은 여러 데이터를 순서대로 담는데, 모든 요소가 반드시 동일한 타입이어야 한다. 예를 들어, 숫자만 담는 배열은 number[] 형태로 선언하며, 문자열만 담는 배열은 string[]로 표기한다.

let scores: number[] = [80, 95, 64];
let users: string[] = ["철수", "영희", "민수"];

만약 여러 타입을 포함해야 한다면 유니언 타입을 활용할 수 있다.

let data: (number | string)[] = [1, "hello", 3];

배열 내 메서드(map, filter 등) 사용은 자바스크립트와 동일하지만, 타입스크립트는 각 요소의 타입을 보장한다는 점에서 코드 안정성을 크게 높인다.

튜플: 다른 타입, 고정 길이의 배열

튜플은 각 요소의 타입과 순서가 미리 정해진 특수한 배열이다. 튜플을 쓰면 데이터의 구조가 고정되어야 할 때 실수를 미리 방지할 수 있다.

let userInfo: [string, number] = ["Kim", 28]; // [이름, 나이]

각 위치에 꼭 맞는 타입만 들어갈 수 있기 때문에, 순서나 타입이 어긋나면 바로 오류가 발생한다. 가령 [28, "Kim"]처럼 순서를 바꾸면 컴파일 타임에 에러가 발생한다.

튜플의 주요 강점은, 함수에서 여러 타입의 값을 함께 반환하고 싶을 때, 혹은 소규모의 고정 구조 데이터를 안전하게 관리할 때 빛을 발한다.

함수 반환 예시:

function parseUser(input: string): [string, number] {
  // "Kim,28" 형태 입력
  const [name, age] = input.split(",");
  return [name, Number(age)];
}

열거형(Enum): 의미 있는 상수 집합 다루기

열거형은 여러 상수를 의미 있는 이름으로 묶어서, 코드의 가독성과 유지보수성을 높인다. TypeScript에서는 크게 숫자 기반(enum), 그리고 문자열 기반(string enum)을 지원한다.

숫자 enum 기본 예시:

enum Direction {
  Up,   // 0
  Down, // 1
  Left, // 2
  Right // 3
}

문자열 enum 예시:

enum State {
  Loading = "LOADING",
  Success = "SUCCESS",
  Error = "ERROR"
}

enum을 사용하면 숫자나 문자열로 직접 비교하는 실수를 줄이고, 코드에 의도가 분명하게 드러난다. 특히 문자열 enum은 디버깅 시 값이 바로 읽혀 유지관리가 용이하다.

실전에서의 조합 활용법

배열은 유동적인 데이터 저장에, 튜플은 순서와 타입이 고정된 짧은 데이터 그룹에, enum은 반복되는 상수값에 각각 최적화되어 있다. 가령, 서버에서 받아온 사용자 데이터를 튜플로 파싱한 뒤, 사용자 상태를 enum으로 명확히 표기할 수 있다. 이처럼 세 가지 구조를 적절히 조합하면, 타입 안정성과 코드의 명확함을 동시에 누릴 수 있다.

TypeScript에서는 이들 구조 덕분에 데이터를 더 신뢰하고, 실수를 줄이며, 협업 효율을 극대화할 수 있다. 코드 곳곳에서 이 강력한 도구들을 적극적으로 활용해보자.


공유하기
카카오로 공유하기
페이스북 공유하기
트위터로 공유하기
url 복사하기