타입스크립트 기초 공부 기록 <타입스크립트 교과서 > 2장 3기본 문법 익히기 :3일차

JongMin Seong·2024년 9월 7일

Typescript 공부

목록 보기

3/8

리터럴 타입 (Literal Type)

allow you to specify exact values for variables or properties
=> 즉 변수나 속성에 대한 정확한 값을 지정한 타입을 얘기합니다
(Enum으로도 비슷한 타입을 만들 수 있다)

오늘날 TypeScript에는 문자열과 숫자, 두 가지 리터럴 타입이 있는데 이를 사용하면 문자열이나 숫자에 정확한 값을 지정할 수 있습니다.

리터럴 타입 예시

리터럴 타입은 집합 타입의 보다 구체적인 하위 타입입니다. 이것이 의미하는 바는 타입 시스템 안에서 "Hello World"는 string이지만, string은 "Hello World"가 아니란 것입니다. <TypeScript-Handbook 한글 문서 중>

// const를 사용하여 변수 helloWorld가
// 절대 변경되지 않음을 보장합니다.

// 따라서, TypeScript는 문자열이 아닌 "Hello World"로 타입을 정합니다.
const helloWorld = "Hello World";

// 반면, let은 변경될 수 있으므로 컴파일러는 문자열이라고 선언할 것입니다.
let hiWorld = "Hi World";

Enum과 Literal Type 차이

typescript

// 리터럴 타입
type School = 'elelment' | 'middle' | 'hight';

// enum 타입
enum School2 {
   ELEMENT = 'ELEMENT',
   MIDDLE = 'middle',
   HIGHT = 'hight'
}
   
// const를 사용한 enum 타입
const enum School3 {
   ELEMENT = 'ELEMENT',
   MIDDLE = 'middle',
   HIGHT = 'hight'
}
var a : School = "elelment" 
var b: School2 = School2.MIDDLE
var c: School3 = School3.MIDDLE

javascript로 변경한 코드

"use strict";
// 리터럴 타입
/* JavaScript에는 타입 시스템이 없으므로, 리터널 타입은 삭제된다*/

// enum 타입
var School2;
(function (School2) {
    School2["ELEMENT"] = "ELEMENT";
    School2["MIDDLE"] = "middle";
    School2["HIGHT"] = "hight";
})(School2 || (School2 = {}));

// const enum 
/*TypeScript의 const enum은 컴파일 시 값으로 직접 대체됩니다*/

/*TypeScript의 리터럴 타입 School은 단순히 특정 문자열 값들만 허용하는 타입입니다. 
JavaScript에는 타입 시스템이 없으므로, 변환 시 타입 정보가 사라지고 값만 남습니다. */
var a = "elelment";

/*TypeScript의 enum은 JavaScript 객체로 변환됩니다. 
enum은 문자열 값들을 매핑하는 객체로 변환되어, 값들을 객체의 프로퍼티로 접근할 수 있습니다.*/
var b = School2.MIDDLE;

/*TypeScript의 const enum은 컴파일 시 값으로 직접 대체됩니다.
const enum은 코드에서 직접적으로 사용될 값으로 변환되어, 최적화를 위해 상수 값으로 직접 삽입됩니다.*/
var c = "middle" /* School3.MIDDLE */;

typescript에서 리터널 타입을 사용한 코드를 javascript로 변환한 결과를 확인하면 리터널 타입은 그저 상수 값으로 바뀌어지는 것을 확인할 수 있습니다.
그렇기에 리터널 타입이란 변수나 속성에 대한 정확한 값을 지정한 상수값을 얘기한다는 것을 말합니다.

Literal Type 사용

문자열 리터널 타입 (String Literal Types)

type Color = "red" | "blue" | "yellow";

const myColor1: Color = "red";
const myColor2: Color = "aaa";  // Error: Type 'aaa' is not assignable to type 'Color'.

숫자형 리터럴 타입 (Numeric Literal Types)

type Grade = 1 | 2 | 3;

const student1: Grade = 1;
const student2: Grade = 5;

객체 리터널 타입

// 객체 리터럴 타입 정의
type Person = {
  name: string;
  age: number;
  isStudent: boolean;
};

// 객체 리터럴 타입을 사용하는 예제
const person1: Person = {
  name: "Alice",
  age: 30,
  isStudent: false
};

// 컴파일 오류 발생 예제
// const person2: Person = {
//   name: "Bob",
//   age: "25", // 오류: 'age'는 'number' 타입이어야 합니다.
//   isStudent: true
// };

❗️객체 리터널 사용시 주의

const으로 선언한 객체도 수정할 수 있기에 오류가 발생할 수 있다 그렇기에 as const(특별한 접미사)나 readyonly를 사용하자
// readonly 사용
type Person = {
  readonly name: string;
  readonly age: number;
  isStudent: boolean;
};
// as const 사용
const Person = {
  name: "Alice",
  age: 30,
  isStudent: false,
} as const;