TypeScript에서 Literal Types란 무엇이며, 그 용도는 무엇인가요? 이를 통해 변수의 값에 엄격한 제한을 어떻게 구현할 수 있으며, 사용 시 어떤 함정이 있을 수 있나요?

답변

Literal Types는 변수의 가능한 값을 특정한 엄격한 상수로만 제한할 수 있게 해주며, 일반적인 타입(예: 단순한 숫자 대신 숫자 5 또는 문자열 "yes")이 아닙니다.

이는 고정된 매개변수, 상태 등을 가진 API를 만드는 데 유용합니다.

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

function move(dir: Direction) {
  // ...
}

move('left'); // 괜찮음
move('top');  // 컴파일 오류!

숫자, boolean 및 심지어 전체 구조에 대해서도 (tuple literal type) 작동합니다:

type WeekDay = 1 | 2 | 3 | 4 | 5 | 6 | 7;
const day: WeekDay = 6; // 괜찮음

제한 및 뉘앙스:

• Literal 타입으로는 값을 암시적으로 변환할 수 없습니다 (예: 사용자 입력에서 나온 문자열을 'left' | 'right' 타입의 변수에 할당할 수 없습니다).
• 상수 및 let 변수를 사용할 때는 출력 타입에 대해 기억해야 합니다:

const d = 'left'; // 'left' 타입
let e = 'left';   // string 타입

속임수 질문

질문: 변수를 const x = "yes";로 정의하면 어떤 타입이 되며, 이후에 다른 문자열 값을 할당할 수 있나요?

답변:

• const x = "yes";로 선언하면 x는 "yes" (literal type) 타입을 가지게 되며, 'yes' 외의 다른 값을 할당할 수 없습니다 (const이기 때문에 아예 변경할 수 없습니다).
• let x = "yes";로 선언하면 x는 string으로 타입이 지정되며, 어떤 문자열이든 할당할 수 있습니다.

const x = 'yes'; // x: 'yes'
let y = 'yes';   // y: string

주제에 대한 미숙지로 인한 실제 오류 사례.

---

이야기

작업 상태에 대한 프로젝트에서 enum을 사용했으나, 개발자가 이를 string으로 교체했습니다. 그 결과 API가 상태로 어떤 문자열도 받을 수 있게 되어, 제품 발전 중 많은 버그가 발생했습니다.

---

이야기

개발자가 데이터 유효성 검사를 위해 리터럴 타입을 사용하려 했으나, 양식 필드에서 매개변수를 직접 할당했습니다 — TS는 입력 필드의 타입이 string이었기 때문에 이를 허용했습니다, 문자열을 설정할 때 'ok' | 'fail'과 같은 리터럴이 아니었습니다. 결과적으로 런타임에서 허용된 값의 집합에 없는 값이 나타났습니다.

---

이야기

리터럴 값을 받는 함수에 대한 테스트를 작성하는 동안, 자동 생성된 테스트가 우연히 예상치 못한 문자열 매개변수를 전달했습니다. 테스트가 실패했습니다. 나중에 typification이 let 선언에서의 타입 출력을 주의하지 않아 약해졌다는 것이 밝혀졌고, 이는 컴파일러에서 감지되지 않았습니다.