[코딩앙마] 타입스크립트 4. 리터럴 타입

이렇게 선언했을 때 user1은 타입이 Mike가 되고 user2는 string이 된다.

const user1 = 'Mike';
let user2 = 'Tom';

 

그래서 user2에 숫자를 할당하려고 하면 에러를 띄운다. 타입스크립트가 user2는 string이라고 추론했기 때문이다.

const user1 = 'Mike';
let user2 = 'Tom';

// 에러
user2 = 1;

 

여러 개를 쓰고 싶을 때는 명시적으로 타입을 정해주면 된다.

const user1 = 'Mike';
let user2 : string | number = 'Tom';

// 가능
user2 = 1;

 

리터럴 타입

리터럴 타입을 사용하면 원하는 값만 들어가게 할 수 있다. type을 선언하고 이용하면 된다. 그럼 해당 타입에서 정한 값 외에 다른 값이 들어가면 에러를 띄운다.

type Job = 'teacher' | 'developer' | 'designer';

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

// 가능
const user1 : User = {
  name : 'Mike',
  job : 'teacher'
}

// 에러
const user2 : User = {
  name : 'Tom',
  job : 'police'
}

 

숫자 리터럴 타입도 가능하다.

interface Student {
  name : string;
  grade : 1 | 2 | 3 | 4;
}

 

유니온 타입

| 는 유니온 타입이라고 하는데 앞선 예제들에서 여러 개의 타입을 정해주기 위해 사용했다.

type Job = 'teacher' | 'developer' | 'designer';

interface Student {
  name : string;
  grade : 1 | 2 | 3 | 4;
}

 

이렇게 두가지 인터페이스를 인자로 받는 함수가 있을 때 color는 두 인터페이스 모두 가진 속성이라서 문제가 생기지 않지만, start는 Car에만 있는 속성이라서 에러를 띄운다.

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

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

function getGift(gift : Car | Mobile) {
  // 가능
  console.log(gift.color)
  // 에러 
  // Property 'start' does not exist on type 'Car | Mobile'.
  // Property 'start' does not exist on type 'Mobile'.
  console.log(gift.start())
}

 

먼저 타입이 어떤건지 확인을 해줘야한다. 검사할 항목이 많아지면 switch문을 쓰는 것이 좋다. 그러면 에러가 없어지고 gift에 마우스를 올려보면 gift가 어떤 인터페이스인지 확인할 수 있다. 이렇게 동일한 속성의 타입을 다르게 해서 구분 가능한 것을 식별가능한 유니온 타입이라고 한다.

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

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

function getGift(gift : Car | Mobile) {
  console.log(gift.color)
  if (gift.name === 'car') {
    // (parameter) gift : Car
    console.log(gift.start())
  } else {
    // (parameter) gift : Mobile
    console.log(gift.call())
  }
}

 

교차 타입 (Intersection Type)

유니온 타입이 or(||)를 의미했다면 교차 타입은 and(&&)를 의미한다. 

 

이렇게 두개의 인터페이스가 있을 때 &을 사용해서 교차 타입을 정해줄 수 있다. 두 타입의 속성을 모두 가지고 있지 않으면 에러를 띄운다.

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

interface Toy {
  name : string;
  color : string;
  price : number;
}

// 가능
const toyCar : Car & Toy = {
  name : '빵빵',
  start() {console.log('start')},
  color: 'red',
  price : 50000
}

// 에러
const toyCar : Car & Toy = {
  name : '빵빵',
  start() {console.log('start')},
  color: 'red',
}