[TypeScript] type 변수﹠Literal Types

✅ Type 변수

한 변수 안에 여러 타입을 지정해야 하는 경우나 나중에 재사용을 하고 싶은 타입들이 있다면 type 키워드를 사용해 타입을 지정해준다.

같은 이름의 type 변수는 재정의가 불가능하다.

🤫 before
let animal :string | number | undefined ;

🤩 after
type Animal :string | number | undefined ;

let animal:Animal = 123 ;

💡 type의 변수명을 지정할때는 일반 변수와의 차이르 두기위해 대문자로 시작하는 변수명을 지정한다.

✍️ object를 타입변수로 지정하여 사용 가능하다

🤫 before
let animal :{name :string, age :number} = {name : 'lion', age : 5};

에구 디러

🤩 after
type Animal = {
    name :string, 
    age :number,
    }

let animal:Animal = {name : 'lion', age : 5};

✌️ type 변수 합치기

1️⃣ union type으로 합치기

<type Name = string ; 
type Age = number ; 

type Person = Name | Age ;  👍

2️⃣ ﹠연산자로 object 타입 extend 하기

type PositonX = {x : number}
type PositonY = {y : number}

type NewType = PositionX ﹠ PositonY ; 👍

let position :NewType = {x : 10, y : 20} ;

✍️ readonly

object의 자료 수정을 막기위해서는 readonly라는 키워드를 사용하면 된다.

type Birth = {
  readonly city : string
 }
 
 const jinkyung :Birth = {
  city : 'seoul'
 }
 
 jinkyung.city = 'busan' -> 😡

여기서 주의할점은 타입스크립트에서는 에러가 발생하지만 자바스크립트에서는 잘 실행된다.

타입스크립트에서의 에러는 에디터나 터미널에서 경고수준의 에러기때문에 실제 변환된 js파일에서는 에러가 없다 😵

---

✅ Literal Types

Literal Types이란 특정 글자나 숫자만 가질 수 있게 제한을 두는 타입이다.

let name : 'jin' | 'kyung' ;

name : 'jin' ; //🆗

✍️ as const 문법

아래 코드처럼 'jinkyung'이라는 값만 들어올 수 있는 타입을 만들고 함수의 인자로 받을 수 있게 지정을 했을때 오류가 발생한다.

let person ={
    name : 'jinkyung'
}
person.name //jinkyung

function user(a:'jinkyung'){

}
user(person.name) //😡

에러가 발생하는 이유는 위 코드는 person.name = 'jinkyung'이라는 의미가 아니고,
'jinkyung'이라는 타입만 입력할 수 있다는 의미이기 때문이다.

이를 해결하기위해서는

• 1. object를 만들때 미리 타입을 잘 정하기
• 2. assertion 사용하기
• 3. as const 문법 사용하기가 있다.

let person ={
    name : 'jinkyung'
}as const ⭐️
person.name //jinkyung

function user(a:'jinkyung'){

}
user(person.name) //😡

위 코드처럼 object의 뒤에 as const를 입력해주면 오류가 사라지고 object를 literal type으로 알아서 지정해준다.

object자료를 완전히 잠가놓고싶을 때 사용하면 좋다.👍

as const의 효과는 두가지이다.

• 1. object의 value값을 그대로 타입으로 지정해줌
• 2. object 속성들에 readonly가 붙은것과 같음