TypeScript 유니언 타입과 리터럴 타입 완벽 정리 (8강)

TypeScript 유니언 타입과 리터럴 타입 완벽 정리

TypeScript는 JavaScript에 **정적 타입**을 추가하여 코드의 안정성을 높이고, 오류를 사전에 방지할 수 있습니다. 그 중에서도 **유니언 타입(Union Type)**과 **리터럴 타입(Literal Type)**은 매우 중요한 개념으로, 타입을 더 세밀하게 제어할 수 있게 해줍니다. 이번 강의에서는 TypeScript에서 유니언 타입과 리터럴 타입을 완벽하게 이해하고, 언제 어떻게 활용할 수 있는지에 대해 자세히 알아보겠습니다.

유니언 타입 (Union Type)란?

**유니언 타입(Union Type)**은 하나의 변수나 매개변수가 여러 타입을 가질 수 있도록 해주는 기능입니다. 즉, 유니언 타입을 사용하면 특정 변수나 파라미터가 여러 가지 타입 중 하나를 가질 수 있도록 설정할 수 있습니다. 유니언 타입은 파이프(|) 기호를 사용하여 여러 타입을 구분합니다.

let value: string | number;
value = "Hello, TypeScript!";
value = 42;

위 예제에서 변수 value는 **문자열(string)** 또는 **숫자(number)** 값을 가질 수 있습니다. 유니언 타입을 사용함으로써 다양한 타입을 허용하면서도 TypeScript는 해당 타입에 맞는 값을 할당할 수 있도록 보장합니다.

유니언 타입 활용 예시

유니언 타입을 사용하면 **다양한 형태의 값을 허용하는 함수**나 **변수**를 정의할 수 있습니다. 예를 들어, 유니언 타입을 사용하여 **여러 종류의 값**을 받아 처리하는 함수는 다음과 같이 정의할 수 있습니다.

function printId(id: string | number): void {
  console.log(`Your ID is: ${id}`);
}

printId("12345"); // 문자열로 ID 출력
printId(12345);   // 숫자로 ID 출력

위 예제에서 printId 함수는 매개변수 id가 **문자열** 또는 **숫자**일 수 있음을 명시합니다. 따라서 두 가지 타입 모두 유효하게 처리됩니다.

리터럴 타입 (Literal Type)란?

**리터럴 타입(Literal Type)**은 변수나 매개변수가 특정한 **값**을 가질 수 있도록 제한하는 타입입니다. 리터럴 타입을 사용하면, **구체적인 값**만을 허용할 수 있어 코드의 정확성을 더욱 높일 수 있습니다. 리터럴 타입은 문자열, 숫자, 불리언 값 등에서 사용될 수 있습니다.

let color: "red" | "green" | "blue";
color = "red";  // 유효한 값
color = "yellow";  // 오류 발생

위 예제에서 변수 color는 **"red"**, **"green"**, **"blue"** 세 가지 값만 가질 수 있습니다. 따라서 **"yellow"**와 같은 다른 값은 허용되지 않으며, TypeScript는 이를 오류로 처리합니다.

리터럴 타입을 활용한 예시

리터럴 타입은 특정한 값만을 허용해야 하는 경우에 매우 유용합니다. 예를 들어, **상태 값(state)**이나 **버튼 클릭 이벤트**처럼 제한된 값만 허용되는 상황에서 사용됩니다.

type Status = "success" | "error" | "loading";

function showStatus(status: Status): void {
  console.log(`Current status: ${status}`);
}

showStatus("success");  // 유효한 값
showStatus("pending");  // 오류 발생

위 예제에서 Status 타입은 **"success"**, **"error"**, **"loading"** 세 가지 값만 허용합니다. 따라서 함수 showStatus에 전달되는 값은 이들 중 하나여야 하며, "pending"과 같은 값은 오류로 처리됩니다.

유니언 타입과 리터럴 타입 결합하기

유니언 타입과 리터럴 타입은 결합하여 더 세밀한 타입 정의가 가능합니다. 유니언 타입을 사용하면서 리터럴 타입을 결합하여, 보다 구체적인 타입을 지정할 수 있습니다.

type Color = "red" | "green" | "blue";
type Status = "active" | "inactive";

type ButtonProps = {
  color: Color;
  status: Status;
}

const button: ButtonProps = {
  color: "red",
  status: "active"
};

위 예제에서 ButtonProps 타입은 두 개의 리터럴 타입 Color와 Status를 결합하여 버튼의 색상과 상태를 정의합니다. 이렇게 결합함으로써 버튼에 대해 더욱 구체적이고 제한적인 타입을 정의할 수 있습니다.

유니언 타입과 리터럴 타입의 차이점

**유니언 타입**은 변수나 매개변수가 **여러 타입 중 하나**를 가질 수 있도록 허용하는 반면, **리터럴 타입**은 **특정 값 하나**만을 허용하는 타입입니다. 유니언 타입은 다양한 값을 받을 수 있다는 유연성을 제공하지만, 리터럴 타입은 값의 제약을 두어 보다 **정확한 타입 정의**를 할 수 있습니다.

유니언 타입: 하나의 변수나 매개변수가 여러 가지 타입 중 하나를 가질 수 있도록 설정.
리터럴 타입: 변수나 매개변수가 특정 값만을 가질 수 있도록 제한.

유니언 타입을 활용한 고급 예시

유니언 타입은 **복잡한 조건**을 처리할 때 매우 유용합니다. 예를 들어, 유니언 타입과 리터럴 타입을 결합하여 다양한 입력값을 처리할 수 있습니다.

type InputType = "text" | "number";
type InputProps = {
  type: InputType;
  value: string | number;
};

function InputField(props: InputProps): void {
  if (props.type === "text") {
    console.log(`Text input: ${props.value}`);
  } else {
    console.log(`Number input: ${props.value}`);
  }
}

InputField({ type: "text", value: "Hello" });
InputField({ type: "number", value: 42 });

위 예제에서 InputProps 타입은 **"text"** 또는 **"number"** 타입의 입력을 받도록 설정되어 있습니다. 이와 같은 방식으로 유니언 타입을 활용하면 다양한 입력 타입을 처리하는 로직을 더욱 명확하고 안전하게 작성할 수 있습니다.

마무리: 유니언 타입과 리터럴 타입의 활용

**유니언 타입**과 **리터럴 타입**은 TypeScript에서 타입을 정의할 때 매우 유용한 도구입니다. 유니언 타입은 하나의 값이 여러 타입 중 하나일 수 있도록 허용하고, 리터럴 타입은 특정 값만을 허용하여 코드의 정확성을 높입니다. 이 두 타입을 적절히 결합하면 코드의 안정성을 높이고, 더 정확한 타입 체크를 할 수 있습니다.

TypeScript의 강력한 타입 시스템을 활용하여, 보다 안전하고 유지보수하기 쉬운 코드를 작성해보세요!

다음 강의에서는 제네릭(Generic)을 사용하여 더 유연하고 재사용 가능한 타입을 정의하는 방법을 배워보겠습니다.

mystory55776 님의 블로그

TypeScript 유니언 타입과 리터럴 타입 완벽 정리 (8강)