타입스크립트 튜플(tuple) / 열거형(enum)

 

튜플(tuple)

 

타입스크립트에서 튜플(tuple)은 고정된 크기를 가지는 배열로, 각 요소가 서로 다른 타입을 가질 수 있고, 요소의 순서가 매우 중요하다. 튜플 타입은 타입스크립트의 타입 시스템에서만 존재하며, 자바스크립트에는 없는 개념이다.

1. 튜플의 특징

• 고정된 개수의 요소를 가진다.
• 각 요소마다 타입이 다를 수 있다.
• 요소의 순서와 타입이 모두 일치해야 한다.
• 자바스크립트에는 없고, 타입스크립트 타입 시스템에서만 동작한다.

2. 튜플 기본 문법

// 튜플 타입 선언
let myTuple: [string, number, boolean];

// 올바른 예시
myTuple = ["hello", 15, false];

// 잘못된 예시 (순서 오류)
myTuple = ["hello", false, 15]; // 오류 발생

// 잘못된 예시 (요소 개수 부족)
myTuple = ["hello", 15]; // 오류 발생

각 요소의 타입과 순서가 모두 맞아야만 정상적으로 동작한다.

3. 함수 반환값에 튜플 사용하기

여러 타입의 값을 한 번에 반환할 때 튜플을 사용하면 편리하다.

function getUserInfo(): [number, string] {
  return [101, "Alice"];
}

const [userId, userName] = getUserInfo();
console.log(userId);   // 101
console.log(userName); // "Alice"

4. 타입 별칭과 튜플

타입 별칭(type alias)과 함께 사용하면 코드의 가독성이 높아진다.

type Flavor = string;
type Price = number;
type IceCream = [Flavor, Price];

const vanilla: IceCream = ["vanilla", 500];

// vanilla[0]은 Flavor 타입, vanilla[1]은 Price 타입이다.

5. 튜플 배열 사용하기

튜플 타입을 배열의 요소 타입으로 지정할 수 있다. 예를 들어, 위도와 경도를 표현할 때 유용하다.

type Coord = [number, number];
let coords: Coord[] = [];

coords.push([36.95, 127.75]);
coords.push([38.76, 128.12]);

// 잘못된 예시 (타입 불일치)
coords.push([36.95, "east"]); // 오류 발생

배열의 각 요소가 항상 [number, number] 구조를 따라야 한다.

6. 튜플과 구조분해 할당

튜플을 구조분해 할당하면 각 요소의 타입이 자동으로 추론된다.

const iceCream: IceCream = ["strawberry", 700];
const [flavor, price] = iceCream;

console.log(flavor); // "strawberry"
console.log(price);  // 700

 

 

열거형(enum) 타입

열거형(enum)은 상수의 명명된 집합을 그룹화해서 관리하는 타입스크립트만의 독립적인 자료형이다. 여러 상수값을 하나의 타입으로 묶어서 재사용성과 코드의 가독성을 높여주고, 잘못된 값의 사용을 사전에 방지할 수 있다.
열거형은 주로 숫자형과 문자형 두 가지 방식으로 사용한다.
자바스크립트에는 존재하지 않고 타입스크립트에서만 지원한다.
(참고: Inpa Dev, 꼼꼼한 개발자)

7. 숫자형 enum

// 기본 숫자형 enum
enum Team {
  Manager,    // 0
  Planner,    // 1
  Developer,  // 2
  Designer    // 3
}

let sarha: number = Team.Designer; // 3

// 값 직접 할당도 가능
enum TeamWithValues {
  Manager = 101,
  Planner = 208,
  Developer = 302,
  Designer        // 303 (이전 값 + 1)
}

let yamoo9: number = TeamWithValues.Manager;   // 101
let sarha2: number = TeamWithValues.Designer;  // 303

별도의 값을 지정하지 않으면 0부터 1씩 증가하는 값을 자동으로 할당한다. 중간에 값을 명시하면 이후 값은 그 기준으로 1씩 증가한다.
(참고: 꼼꼼한 개발자)

8. 문자형 enum

// 문자형 enum
enum Direction {
  Left = "LEFT",
  Right = "RIGHT",
  Up = "UP",
  Down = "DOWN"
}

let move: Direction = Direction.Left;
console.log(move); // "LEFT"

문자형 enum은 각 멤버에 명시적으로 문자열 값을 할당한다. 디버깅이나 로깅 시 가독성이 좋다.
(참고: 영진 블로그)

9. enum 활용 예시

// 비디오 플레이어 상태 관리 예시
enum PlayerState {
  Buffering,
  Playing,
  Paused,
  Seeking
}

let currentState: PlayerState = PlayerState.Buffering;
currentState = PlayerState.Playing;

// 상태 비교 함수
function isPlaying(state: PlayerState): boolean {
  return state === PlayerState.Playing;
}

console.log(isPlaying(currentState)); // true

10. 문자형 enum과 switch-case 활용

enum Direction {
  Left = "LEFT",
  Right = "RIGHT",
  Up = "UP",
  Down = "DOWN"
}

function move(dir: Direction) {
  switch (dir) {
    case Direction.Left:
      console.log("왼쪽 이동");
      break;
    case Direction.Right:
      console.log("오른쪽 이동");
      break;
    case Direction.Up:
      console.log("위로 이동");
      break;
    case Direction.Down:
      console.log("아래로 이동");
      break;
  }
}

move(Direction.Right); // "오른쪽 이동"

switch-case와 함께 사용하면 허용된 값만 처리할 수 있어 코드의 안정성이 높아진다.
(참고: TypeScript Handbook)

11. enum의 특징과 주의점

• 숫자형 enum은 값이 자동 증가한다.
• 문자형 enum은 명시적으로 값을 지정해야 한다.
• enum은 런타임에도 객체로 존재하며, 숫자형 enum은 리버스 매핑(값→이름)도 지원한다.
• const enum을 사용하면 컴파일 결과에 enum 객체가 남지 않고 값만 인라인 처리된다.
• enum 값 변경 시 전체 코드에 영향이 있으므로 신중하게 관리해야 한다.

 

< const enum >
const enum은 일반 enum과 거의 동일하게 사용하지만, 선언할 때 enum 앞에 const 키워드를 붙인다. 작성법은 아래와 같다.

const enum Direction {
  Up,
  Down,
  Left,
  Right,
}

let dir: Direction = Direction.Left;

 

여기서 const enum의 핵심은, 컴파일(트랜스파일) 시 TypeScript가 enum 객체를 실제 JS 코드에 남기지 않고, enum을 사용하는 부분을 실제 값(숫자나 문자열)로 바로 치환한다는 점이다. 예를 들어 위 코드는 아래처럼 컴파일된다.

 

컴파일 결과

let dir = 2; // Direction.Left가 2로 대체됨