리터럴 타입

다음 수업에 오신 것을 환영합니다! 이번 수업에서는 변수에 정확하고 구체적인 값을 지정할 수 있는 TypeScript 기능인 리터럴 타입에 대해 배우겠습니다. 리터럴 타입을 사용하면 코드를 더 예측 가능하고 타입 안전하게 만들 수 있습니다. 자세히 알아봅시다!

리터럴 타입이란?

TypeScript의 리터럴 타입을 사용하면 변수가 문자열이나 숫자 같은 일반적인 타입이 아니라 특정 값을 가지도록 할 수 있습니다. 예를 들어 변수에 "yes" 또는 "no" 값만 저장하도록 제한할 수 있습니다.

예시:

과제: 리터럴 타입을 사용하는 변수를 선언하고 유효한 값과 유효하지 않은 값을 할당해 보세요.

let answer: "yes" | "no";
answer = "yes"; 
// Valid
// answer = "maybe"; 
// Error: Type '"maybe"' is not assignable to type '"yes" | "no"'.

문자열을 사용하는 리터럴 타입

문자열 리터럴 타입은 변수가 특정 문자열 값 집합만 갖도록 제한합니다. 예시는 다음과 같습니다.

과제: 방향을 나타내는 타입을 만들고 변수에 값을 할당해 보세요.

type Direction = "up" | "down" | "left" | "right";

let move: Direction;
move = "up"; // Valid
// move = "forward"; 
// Error: Type '"forward"' is not assignable to type '"up" | "down" | "left" | "right"'.

숫자를 사용하는 리터럴 타입

숫자와 함께 리터럴 타입을 사용해 변수가 특정 숫자값만 갖도록 제한할 수도 있습니다. 예시는 다음과 같습니다.

과제: 주사위 굴림을 위한 숫자 리터럴 타입을 정의하고 테스트해 보세요.

type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

let roll: DiceRoll;
roll = 4; // Valid
// roll = 7; 
// Error: Type '7' is not assignable to type '1 | 2 | 3 | 4 | 5 | 6'.

함수에서 리터럴 타입 사용하기

함수 매개변수에 리터럴 타입을 사용하면 특정 값만 허용할 수 있습니다. 예시는 다음과 같습니다.

과제: 리터럴 타입을 사용하는 매개변수가 있는 함수를 작성해 보세요.

function setStatus(status: "active" | "inactive"): void {
  console.log(`The status is now ${status}`);
}

setStatus("active"); 
// Output: The status is now active
// setStatus("pending"); 
// Error: Type '"pending"' is not assignable to type '"active" | "inactive"'.

리터럴 타입과 타입 별칭

리터럴 타입을 재사용하려면 타입 별칭으로 정의할 수 있습니다. 예시는 다음과 같습니다.

과제: 신호등 색상을 위한 타입 별칭을 만들고 변수에서 사용해 보세요.

type TrafficLight = "red" | "yellow" | "green";

let light: TrafficLight = "red";
console.log(light);
 // Output: red

객체에서 리터럴 타입 사용하기

객체 내부에서 리터럴 타입을 사용해 특정 속성의 값을 제한할 수 있습니다. 예시는 다음과 같습니다.

과제: 리터럴 타입을 사용하는 속성이 있는 객체 타입을 만들어 보세요.

type Button = {
  label: string;
  size: "small" | "medium" | "large";
};

let submitButton: Button = {
  label: "Submit",
  size: "medium",
};

console.log(submitButton);

흔히 하는 실수

리터럴 타입을 사용할 때 흔히 하는 실수는 다음과 같습니다.

• 리터럴 타입을 수정할 때 허용되는 모든 값을 업데이트해야 한다는 점을 잊는 것
• 리터럴 타입에 포함되지 않은 값을 할당하는 것(TypeScript가 이를 감지합니다)
• 유연성이 더 중요한 매우 동적인 데이터에 리터럴 타입을 사용하는 것

팁: 제어 가능하고 예측 가능한 상황에는 리터럴 타입을 사용하세요!

잘하셨습니다!

축하합니다! TypeScript에서 리터럴 타입을 사용해 정확하고 제한된 값을 정의하는 방법을 배우셨습니다. 리터럴 타입은 예측 가능하고 타입 안전한 코드를 작성할 때 특히 유용합니다. 다음 수업에서는 함수 작업을 지원하는 TypeScript의 기능을 살펴보겠습니다. 계속 코딩해 봅시다!