TypeScript - 리터럴 타입: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타! 오늘 우리는 TypeScript 리터럴 타입의 흥미로운 세상으로 뛰어들어 볼 거예요. 프로그래밍 초보자라면 걱정 마세요 - 이 모험을 안내해 드릴 친절한 가이드가 여기 있습니다. 이 튜토리얼의 끝을 맺을 때쯤에는 리터럴 타입을 마스터하셔서 프로처럼 다룰 수 있을 거예요!

TypeScript - Literal Types

리터럴 타입이란?

이전에 다이빙하기 전에, 피자를 주문하는 상황을 상상해 보세요. "피자를 주문하고 싶어요"라고 말할 수는 없습니다. 피자의 크기를 지정해야 합니다: 소, 중, 대. TypeScript에서 리터럴 타입은 그런 특정 피자 크기처럼 - 변수가 가질 수 있는 정확한 값입니다.

문법

리터럴 타입의 문법은 간단합니다. 원하는 정확한 값을 사용하는 것입니다. 기본 예제를 보겠습니다:

let pizzaSize: "small" | "medium" | "large";

이 경우, pizzaSize는 "small", "medium", "large" 중 하나만 될 수 있습니다. 다른 값은 허용되지 않습니다 - "extra large"나 "tiny"도 안 됩니다!

문자 리터럴 타입

문자 리터럴 타입은 가장 일반적이고 이해하기 쉬운 타입입니다. 그저 특정 문자열을 가리키는 것입니다.

예제 1: 주간일

type DayOfWeek = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";

let today: DayOfWeek = "Monday";
today = "Friday"; // 이는 괜찮습니다
today = "Someday"; // 오류! Type '"Someday"' is not assignable to type 'DayOfWeek'.

이 예제에서 DayOfWeek은 일주일의 일곱 날 중 하나만 될 수 있는 타입입니다. 다른 문자열을 할당하려고 하면 TypeScript가 경고를 보여줍니다!

예제 2: 교통신호등 색상

type TrafficLightColor = "Red" | "Yellow" | "Green";

function changeLight(color: TrafficLightColor) {
console.log(`The light has changed to ${color}`);
}

changeLight("Green"); // 정상 작동
changeLight("Purple"); // 오류! Argument of type '"Purple"' is not assignable to parameter of type 'TrafficLightColor'.

여기서 우리는 교통신호등이 유효한 색상으로만 변할 수 있도록 보장합니다. 이 거리에는 디스코 등이 허용되지 않습니다!

숫자 리터럴 타입

문자열과 마찬가지로, 숫자로 리터럴 타입을 만들 수 있습니다. 특정 숫자로 제한하고 싶을 때 유용합니다.

예제 3: 주사위 굴리기

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

function rollDice(): DiceRoll {
return Math.floor(Math.random() * 6) + 1 as DiceRoll;
}

let myRoll = rollDice();
console.log(`You rolled a ${myRoll}`);

이 예제에서 우리는 주사위가 1에서 6 사이의 숫자만 굴릴 수 있도록 보장합니다. 우리의 게임에는 로드 주사위가 없습니다!

예제 4: 셔츠 사이즈

type ShirtSize = 36 | 38 | 40 | 42 | 44;

let myShirtSize: ShirtSize = 40;
myShirtSize = 41; // 오류! Type '41' is not assignable to type 'ShirtSize'.

여기서 우리는 셔츠 사이즈를 특정 숫자로 제한합니다. 이 상점에는 중간 사이즈가 없습니다!

결합된 리터럴 타입

다른 리터럴 타입을 결합할 때 리터럴 타입의 진정한 강력함이 빛을 발합니다.

예제 5: 게임 캐릭터 상태

type CharacterStatus = "Alive" | "Dead" | 1 | 0;

let hero: CharacterStatus = "Alive";
hero = 1; // 이도 정상입니다
hero = "Wounded"; // 오류! Type '"Wounded"' is not assignable to type 'CharacterStatus'.

이 게임에서 캐릭터는 "Alive", "Dead", 1(생존을 의미), 또는 0(사망을 의미) 중 하나가 될 수 있습니다. 텍스트와 코드 표현을 동시에 가지는 것과 같습니다!

리터럴 타입의 사용 사례

리터럴 타입은 많은 시나리오에서 매우 유용합니다. 몇 가지를 탐구해 보겠습니다:

1. 함수 매개변수

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

function sendRequest(url: string, method: HttpMethod) {
// 요청을 보냅니다
console.log(`Sending ${method} request to ${url}`);
}

sendRequest("https://api.example.com", "GET"); // 정상 작동
sendRequest("https://api.example.com", "FETCH"); // 오류! Argument of type '"FETCH"' is not assignable to parameter of type 'HttpMethod'.

HTTP 메서드에 리터럴 타입을 사용하여 유효한 메서드만 사용할 수 있도록 보장합니다.

2. 구성 객체

type Theme = "light" | "dark" | "system";
type Language = "en" | "es" | "fr" | "de";

interface AppConfig {
theme: Theme;
language: Language;
notifications: boolean;
}

const myConfig: AppConfig = {
theme: "dark",
language: "en",
notifications: true
};

리터럴 타입을 사용하여 구성 객체를 엄격하게 만들어 타이포그래피와 무效한 설정을 방지할 수 있습니다.

3. 상태 기계

type LoginState = "loggedOut" | "loggingIn" | "loggedIn" | "error";

class LoginManager {
private state: LoginState = "loggedOut";

login() {
this.state = "loggingIn";
// 로그인 로직 수행
this.state = Math.random() > 0.5 ? "loggedIn" : "error";
}

logout() {
this.state = "loggedOut";
}

getState(): LoginState {
return this.state;
}
}

여기서 우리는 로그인 과정의 다양한 상태를 나타내기 위해 리터럴 타입을 사용하여 상태가事前に 정의된 값 중 하나만 될 수 있도록 보장합니다.

메서드 표

이 튜토리얼에서 다룬 주요 메서드와 개념을 요약하는 표입니다:

메서드/개념	설명	예제
타입 선언	새로운 타입을 리터럴 값으로 정의	`type DayOfWeek = "Monday" \\| "Tuesday" \\| ...`
변수 할당	리터럴 타입을 변수에 할당	`let today: DayOfWeek = "Monday";`
함수 매개변수	함수 매개변수에 리터럴 타입 사용	`function sendRequest(method: HttpMethod) {...}`
결합된 리터럴	다양한 리터럴 타입을 혼합	`type Status = "Active" \\| "Inactive" \\| 0 \\| 1;`
인터페이스 속성	인터페이스 속성에 리터럴 타입 사용	`interface Config { theme: "light" \\| "dark" }`

그렇게 해서, 내 코딩 제자! 리터럴 타입을 마스터하면서 TypeScript 여정에서 한 단계 더 성장했습니다. 완벽한 피자 토피ング을 선택하는 것처럼, 리터럴 타입은 구체적이고 실수를 피할 수 있도록 도와줍니다. 계속 연습하면, 완벽하게 만들어진 피자처럼 맛있는 타입 안전한 코드를 만들 수 있을 것입니다! ??

Credits: Image by storyset