[TypeScript] Literal Types

🐣 들어가기 전에!

---

이번에는 Literal Types에 대해서 다뤄보도록 하겠다. 특정 값들의 유형을 정의할 수 있는건데 개념과 문제점을 살펴보도록 하자꾸!

 

https://t1.daumcdn.net/cafeattach/Uzlo/60326dc1be2af3deff39ff2415f6e71011217ad1

 

 

혹시 지난 게시글이 궁금하다면?

[TypeScript] 타입 변수 type alias

 

 

🐣  Literal Types

---

1. 개념

리터럴 타입은 TypeScript에서 특정 값들의 유형을 정의할 수 있는 기능. 변수나 속성이 특정한 값만을 가질 수 있도록 제한하는 방식. 예를 들어, 문자열이나 숫자 리터럴, 불리언 리터럴 등으로 타입을 선언할 수 있으며, 이는 코드의 가독성을 높이고 잘못된 값 입력을 방지.

 

2. 특징

• 더 엄격하게 변수 타입 관리 가능
• 특정 글자나 숫자만 가질 수 있도록 제한을 두는 타입
• Literal type은 const 변수와 유사하게 사용 가능

아래의 코드를 살펴보면 숫자에는 123만 들어올 수 있음

let 숫자 : 123;
숫자 = 4 // error - 123이 아니기 때문

 

 

Literal type은 const 변수와 유사하게 사용 가능

const 변수1 = 'ham'; //const 변수는 1개의 값만, 값을 바꿀 수 없는 변수
let 변수2: '강아지' | '고양이'; // 강아지or고양이 중에 하나 (const 변수 업글버전이라 생각)

 

 

2. 코드로 살펴보기!

아래의 코드를 살펴보면

• 숫자 literal type 예제를 보면
  • score은 1, 2, 3, 4, 5 중 하나의 값을 가질 수 있는데, 3의 값을 갖고 있으니 출력 꼬우!
• 문자열 literal type 예제
  • Direction 타입은 'left', 'right', 'up', 'down' 중 하나의 문자열, right 출력 꼬우!
• boolean literal type 예제
  
  • isAdmin 변수는 true 또는 false 중 하나의 값, true 꼬우!
• 함수의 literal type 예제
  
  • function 파라미터값은 'hello'만 들어올 수 있고, 반환값이 1 혹은 0이기 때문에 return 값 1 뿜!

// 숫자 리터럴 타입 예제
// score 변수는 1, 2, 3, 4, 5 중 하나의 값을 가질 수 있음.
let score: 1 | 2 | 3 | 4 | 5 = 3; 
console.log(score); // 출력: 3

// 문자열 리터럴 타입 예제
// Direction 타입은 'left', 'right', 'up', 'down' 중 하나의 문자열만 가질 수 있음.
type Direction = 'left' | 'right' | 'up' | 'down'; 
let direction: Direction = 'right';
console.log(direction); // 출력: right

// 불리언 리터럴 타입 예제
// isAdmin 변수는 true 또는 false 중 하나의 값을 가질 수 있음.
let isAdmin: true | false = true; 
console.log(isAdmin); // 출력: true

// 함수
function 함1(a: 'hello') : 1 | 0 { //함수파라미터에 hello만 들어오도록 제한 / return 값으로 1과 0만 받도록 제한
    return 1;
};
함1('hello'); //함수 파라미터에 들어올 수 있는 것들 제한했기에 다른 것 입력하면 에러

 

 

🐣 Literal Types 의 문제점

---

1. 문제점?

리터럴 타입의 주요 문제는 코드의 유연성을 제한할 수 있다는 점. 특정 값들에만 제한된 타입을 정의하면, 필요한 변경이나 확장이 어려울 수 있음. 때때로 리터럴 타입을 사용하면 코드가 지나치게 구체화되어 유지보수가 어려워질 수 있음. 또한 해결법으로 as const 문법을 들 수 있음.

let 자료 = {
    name : 'ham'
}

//'ham'이라는 자료만 들어올 수 있음(x)/'ham'이라는 타입만 들어올 수 있음(O)
function 내함수네(a : 'ham') { 
    
}
내함수네('ham');

 

 

2. 에러 안 나려면?

1. object 만들 때 타입지정 확실히
2. as 문법으로 타입 덮어쓰기
3. as const 키워드 사용
  - 효과1 : object value 값을 타입으로 지정
  - 효과2 : object 속성들에 모두 readonly 붙여줌

 

//방법 1 : object 만들 때 타입지정을 확실히 
let 자료1: {
    name : 'ham'
} = {
    name : 'ham'
}

내함수네(자료1.name); 
//위에서처럼 자료.name을 했지만 에러 발생안함
// 왜냐하면 object에 type을 ham타입으로 했기 때문

---------------------------------------- 

//방법 2 : as 문법으로 타입 덮어쓰기
내함수네(자료.name as 'ham')

---------------------------------------- 

//방법3 : as const 키워드 사용 : 이 object는 literal type 지정 알아서 해주기
//as const 효과 1: object value 값을 그대로 타입으로 지정
//as const 효과 2: object 속성들에 모두 readonly 붙여줌(변경하면 에러나도록)
//object 자료를 완전히 잠가놓고 싶으면 as const 사용
let 자료2 = {
    name : 'ham'
} as const; 

// 자료2.name = 'hi' //as const가 readonly 효과 있기 때문에 변경하려면 에러발생

내함수네(자료2.name);

 

 

---

리터럴타입도!