TypeScript/TypeScript basics
[TypeScript] 리터럴 타입이란?
zenghyun
2023. 5. 19. 17:53
오늘은 리터럴 타입에 대해 알아보겠습니다.
[ 리터럴 타입 좁히기 (Literal Narrowing) ]
var 또는 let으로 변수를 선언할 경우 이 변수의 값이 변경될 가능성이 있음을 컴파일러에게 알립니다. 반면, const로 변수를 선언하게 되면 TypeScript에게 이 객체는 절대 변경되지 않음을 알립니다.
1 2 3 4 5 6 7 8 | // const를 사용하여 변수 helloWorld가 // 절대 변경되지 않음을 보장합니다. // 따라서, TypeScript는 문자열이 아닌 "Hello World"로 타입을 정합니다. const helloWorld = "Hello World"; // 반면, let은 변경될 수 있으므로 컴파일러는 문자열이라고 선언할 것입니다. let hiWorld = "Hi World"; | cs |
무한한 수의 잠재적 케이스들 (문자열 값은 경우의 수가 무한대)을 유한한 수의 잠재적 케이스 (helloWorld의 경우: 1개)로 줄여나가는 것을 타입 좁히기 (narrowing)라 합니다.
[ 문자열 리터럴 타입 (String Literal Types) ]
실제로 문자열 리터럴 타입은 유니언 타입, 타입 가드 그리고 타입 별칭과 잘 결합됩니다. 이런 기능을 함께 사용하여 문자열로 enum과 비슷한 형태를 갖출 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | type Easing = 'ease-in' | 'ease-out' | 'ease-in-out'; class UIElement { animate(dx: number, dy: number, easing: Easing) { if(easing === 'ease-in') { console.log(easing); } else if (easing === 'ease-out') { console.log(easing); } else if (easing === 'ease-in-out') { console.log(easing); } else { console.log('올바르지 않은 easing 값 입니다.'); } } } const element = new UIElement(); element.animate(0,0,'ease-in'); element.animate(0,0,'ease-out'); element.animate(0,0,'ease-in-out'); element.animate(0,0,'ease-x'); // 오류 | cs |
허용된 세 개의 문자열이 아닌 다른 문자열을 사용하게 되면 오류가 발생합니다.
1 | '"ease-x"' 타입은 '"ease-in" | "ease-out" | "ease-in-out"' 타입의 매개 변수에 할당할 수 없습니다. | cs |
문자열 리터럴 타입은 오버로드를 구별하는 것과 동일한 방법으로 사용될 수 있습니다.
1 2 3 4 5 6 | function createElement(tagName: "img"): HTMLImageElement; function createElement(tagName: "input"): HTMLInputElement; // ... 추가적인 중복 정의들 ... function createElement(tagName: string): Element { // ... 여기에 로직 추가 ... } | cs |
[ 숫자형 리터럴 타입 (Numeric Literal Types) ]
TypeScript에는 위의 문자열 리터럴과 같은 역할을 하는 숫자형 리터럴 타입도 있습니다.
1 2 3 4 5 6 | function rollDice(): 1 | 2 | 3 | 4 | 5 | 6 { return (Math.floor(Math.random() * 6) + 1) as 1 | 2 | 3 | 4 | 5 | 6; } const result = rollDice(); | cs |
이는 주로 설정값을 설명할 때 사용됩니다.
1 2 3 4 5 6 7 8 9 10 11 | /** loc/lat 좌표에 지도를 생성합니다. */ declare function setupMap(config: MapConfig): void; // ---생략--- interface MapConfig { lng: number; lat: number; tileSize: 8 | 16 | 32; } setupMap({ lng: -73.935242, lat: 40.73061, tileSize: 16 }); | cs |