JS 에서 TS 넘어가기 - 4 ( 리터럴,유니온,교차 )

이번 포스팅에서는 리터럴 타입에 대해 알아보도록 하겠습니다!

리터럴 타입이 뭔데?

흔히 JS 에서 타입을 설정하면 const , let ,var 로 설정을 하고는 합니다. 이에 대한 각 타입에 대한 설명은 생략하도록 하고,

리터럴 타입은 const처럼 정해진 값을 가지는 타입을 의미하게 됩니다.

예를 들어 ,const name = "Woong" 는 문자형 리터럴 타입으로 분류하게 됩니다.

그래서 어케 쓸건데?

TS 에서는 이전에 배웠던 enum을 이용해서 타입을 만들 수 있습니다.

type Job = "cop" | "developer" | "student";

interface User {
	name : string;
    job  : Job;
}

const user : User = {
	name : "Woong";
    job  : "NoJob" # error 위에 적어둔 타입의 경우만 넣어야함
}

🙋 저게 중요한가요?

🤖 밑에 조수가 설렁설렁 조수 보다는 깐깐한 조수가 더 낫겠죠? 그런 겁니다!

위에 코드를 예시로 들자면 job에 값을 타입으로 범위를 정해주는 것입니다. 그래서 위의 타입에 있는 값이 아닌 "NOjob"은 에러가 검출 되는 것입니다.

마찬가지로 문자열 리터럴 타입 뿐만 아니라 숫자 리터럴 타입도 동일하게 적용이 가능 합니다.

type Job = "cop" | "developer" | "student";

interface User {
	name : number|string;
    grade: 1 |2 |3;
}

const user : User = {
	name : "Woong";
    grade  : 4 # error 위에 적어둔 타입의 경우만 넣어야함
}

유니온 타입

유니온 타입은 JS의 OR 연산자와 같은 의미 입니다.

interface Car{
	name: "bmw";
	color: string;
    start() : void;
}

interface Mobile{
	name: "samsung";
	color: string;
    call() : void;
}

❌function gift(g : Car | Mobile) {
	console.log(g.color) # ok 두 인터페이스에 color이 있으니 ㄱㅊ
    g.start() # error Car에만 있어서 에러남.
    
}

⭕️function gift(g : Car | Mobile) {
	console.log(g.color) # ok 두 인터페이스에 color이 있으니 ㄱㅊ
    if (g.name === "bmw"){
    	g.start()
    }else{
    	g.call()
    }
    
    
}

위 처럼 동일한 속성의 타입을 다르게 해서 구분하는 것을 식별 가능한 유니온 타입 이라고 합니다.

교차 타입

교차 타입은 여러 타입을 합쳐서 사용하는 타입입니다. 이전의 유니온 타입이 OR 의 기능이었다면, 교차 타입은 AND 의 기능을 가지고 있는 타입입니다.

interface Person {
  name: string;
  age: number;
}
interface Developer {
  name: string;
  skill: number;
}
type Capt = Person & Developer; # 새로운 타입 설정할땐 이렇게

const job : Person & Developer = { # 리터럴 타입 설정할땐 해당 타입들의 속성을 다 기입해야함.
	name: string;
    age: number;
    skill: number;
}