TypeScript Academy · 강의

문자열 및 숫자 리터럴 타입

리터럴 타입으로 값을 정확한 문자열과 숫자로 제한합니다.

문자열 및 숫자 리터럴 타입은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

리터럴 타입이란?

대부분의 타입은 값의 집합을 설명합니다. string은 모든 문자열을, number는 모든 숫자를 의미합니다. 리터럴 타입은 이를 하나의 정확한 값으로 좁힙니다.

'north' 타입은 문자열 'north'만 허용하며 다른 값은 허용하지 않습니다. 리터럴 타입을 사용하면 타입 시스템 안에서 허용되는 정밀하고 유한한 값의 집합을 바로 모델링할 수 있습니다.

let dir: 'north' = 'north';
console.log(dir);
// dir = 'south'; // Error: not assignable to type 'north'

문자열 리터럴 유니언

리터럴 하나만으로는 크게 유용하지 않습니다. 여러 리터럴을 |로 결합하면 리터럴 유니언을 만들 수 있습니다. 이는 고정된 선택지 집합을 모델링하는 관용적인 방법입니다.

아래의 Direction은 정확히 네 문자열 중 하나만 될 수 있습니다.

type Direction = 'north' | 'south' | 'east' | 'west';

let heading: Direction = 'east';
console.log('Heading:', heading);

heading = 'west';
console.log('Now:', heading);

유효하지 않은 값 거부하기

리터럴 유니언의 강점은 허용된 집합 밖의 값을 컴파일러가 거부한다는 점입니다. 오타와 유효하지 않은 선택지가 실행 시간 버그가 아닌 컴파일 시점 오류가 됩니다.

type Direction = 'north' | 'south' | 'east' | 'west';

let heading: Direction = 'north';
console.log(heading);
// heading = 'up'; // Error: '"up"' is not assignable to 'Direction'

함수 매개변수로 사용하는 리터럴

특정 값만 허용하는 함수 매개변수에는 리터럴 유니언을 사용하십시오. 호출자에게 자동 완성이 제공되고 유효하지 않은 값은 전달할 수 없게 됩니다.

type Direction = 'north' | 'south' | 'east' | 'west';

function move(dir: Direction): string {
  return 'Moving ' + dir;
}

console.log(move('south'));
// console.log(move('left')); // Error

숫자 리터럴 타입

리터럴 타입은 문자열에만 사용하지 않습니다. 정확한 숫자도 사용할 수 있습니다. 대표적인 예로 면이 6개인 주사위가 있으며, 주사위의 면 값은 1부터 6 중 하나여야 합니다.

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

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

console.log('Rolled:', roll());

매개변수의 숫자 리터럴

숫자 리터럴 유니언은 입력을 정확한 숫자 집합으로 제한하므로 품질 수준, HTTP와 유사한 코드, 격자 크기 등에 적합합니다.

type Quality = 1 | 2 | 3;

function setQuality(level: Quality): void {
  console.log('Quality set to', level);
}

setQuality(2);
// setQuality(5); // Error: 5 is not 1 | 2 | 3

문자열 리터럴과 숫자 리터럴 혼합하기

유니언에는 서로 다른 종류의 리터럴을 함께 넣을 수 있습니다. 이름이 지정된 사전 설정이나 원시 값을 허용하는 API에 유용합니다.

type Size = 'small' | 'large' | 0 | 100;

function resize(s: Size): void {
  console.log('Resizing to', s);
}

resize('small');
resize(100);

불리언 리터럴 타입

불리언에도 리터럴 타입이 있습니다. true와 false는 값인 동시에 타입이기도 합니다. 전체 boolean 타입은 실제로 true | false일 뿐입니다.

type AlwaysOn = true;

let enabled: AlwaysOn = true;
console.log('Enabled:', enabled);
// enabled = false; // Error: false not assignable to true

리터럴로 문서화 개선하기

리터럴 유니언은 문서 역할도 합니다. type Status = 'idle' | 'loading' | 'done'을 읽는 사람은 추측하거나 코드 곳곳에 흩어진 매직 문자열을 찾지 않아도 가능한 모든 상태를 즉시 알 수 있습니다.

type Status = 'idle' | 'loading' | 'done';

function render(s: Status): string {
  return 'State is: ' + s;
}

console.log(render('loading'));

리터럴을 다른 타입과 결합하기

유니언에서 리터럴 타입과 더 넓은 타입을 함께 사용할 수 있습니다. 흔한 패턴인 'auto' | number는 특수 키워드 'auto' 또는 모든 숫자를 의미합니다.

type Width = 'auto' | number;

function setWidth(w: Width): void {
  console.log('Width:', w);
}

setWidth('auto');
setWidth(320);

이름이 지정된 상수로 사용하는 리터럴

리터럴 타입은 이름이 지정된 상수와 함께 사용할 때 특히 효과적입니다. 타입을 한 번 정의하고 어디서나 재사용하면 안전하게 리팩터링할 수 있습니다. 컴파일러가 모든 사용처의 일관성을 유지합니다.

type Theme = 'light' | 'dark';

const DEFAULT_THEME: Theme = 'dark';

function applyTheme(t: Theme): void {
  console.log('Applying', t, 'theme');
}

applyTheme(DEFAULT_THEME);

빠른 확인

리터럴 타입에 대한 이해도를 확인해 보십시오.

복습: 리터럴 타입

다음 내용을 배웠습니다.

리터럴 타입은 'north'나 6처럼 하나의 정확한 값을 나타냅니다.
리터럴을 |로 결합하면 허용되는 값의 유한한 유니언이 만들어집니다.
문자열, 숫자, 불리언에 사용할 수 있으며 'auto' | number처럼 더 넓은 타입과 결합할 수도 있습니다.
함수 매개변수로 사용하면 자동 완성을 제공하고 컴파일 시점에 유효하지 않은 입력을 거부합니다.

다음으로 TypeScript가 리터럴 타입과 확장된 타입 중에서 어떻게 결정하는지 살펴보겠습니다.

type Direction = 'north' | 'south' | 'east' | 'west';
type Dice = 1 | 2 | 3 | 4 | 5 | 6;

function describe(d: Direction, n: Dice): string {
  return 'Go ' + d + ' ' + n + ' steps';
}

console.log(describe('north', 3));

자주 묻는 질문

“문자열 및 숫자 리터럴 타입” 강의는 무료인가요?

네 — “문자열 및 숫자 리터럴 타입” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“문자열 및 숫자 리터럴 타입”에서 뭘 배우나요?

리터럴 타입으로 값을 정확한 문자열과 숫자로 제한합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“문자열 및 숫자 리터럴 타입” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← TypeScript Academy(으)로 돌아가기