타입스크립트 #5 ( 리터럴, 유니온/교차 타입 )

리터럴

const name1 = '김태형'; //const name1: "김태형"
let name2 = '김땡땡';   //let name2: string

const 키워드로 선언된 상수 name1은 이후에 값 변경이 불가능하기 때문에 타입이 '김태형' 이라는 리터럴 값 그 자체가 됐습니다. 반면,
let 키워드로 선언된 변수 name2는 추후에 언제든 값이 변경될 수 있기 때문에 string 타입으로 추론되었습니다.

const name1 = '김태형'; //const name1: "김태형"
let name2 = '김땡땡';   //let name2: string

name2 = 10; //Error : 'number' 형식은 'string' 형식에 할당할 수 없습니다.

string 타입으로 추론된 name2 는 앞으로 string 타입만 가질 수 있습니다. 다양한 타입을 받고 싶다면 | 유니온을 이용하여 명시해주어야 합니다.

유니온 타입 ( Union )

유니온 타입은 허용 가능한 타입을 정의하는 일종의 방식입니다. or 를 의미합니다.

  type Job = 'police' | 'dev' | 'reacher';//유니온타입 선언

  interface User {
    name: string;
    job : Job; //유니온타입 사용
  }

  const user:User = {
    name:'김태형',
    job:'student' //Error : Job 타입에 없는 값 할당
  }

숫자 리터럴과 유니온

  interface User {
    name: string;
	age : 20|30|40
  }

  const user:User = {
    name:'김태형',
    age: 25 //Error : age 속성에 없는 값 할당
  }

유니온 타입에의해 불명확해진 인터페이스 구분하기

앞으로 자주 마주치게 될 상황입니다. | 연산자를 사용하여 다양한 타입을 가지는 매개변수나 반환값을 사용할 때 그 값또한 두가지 타입을 가지게 됩니다.

그렇게되면 | 연산자를 사용한 두 타입에 같은 속성명의 값이 있어야만 사용할 수 있게 되는데, 인터페이스를 구분하기위한 구분자로 사용되는 속성이 있습니다.

interface Car {
    name: 'car' // 인터페이스 구분용 구분자 ( 같은 속성명으로 해야됨 )
    brand : string
	start():void;
  }

interface Mobile {
    name: 'mobile' // 인터페이스 구분용 구분자 ( 같은 속성명으로 해야됨 )
    brand : string
	call():void;
  }

const MnCFunc = (item:Car|Mobile) => {
	console.log(item.name)
	console.log(item.start()) //여기서 item 의 타입 : Car | Mobile
  
  	if(item.name === 'car'){
      console.log(item.start()); //여기서 item 의 타입 : Car
    }else{
      console.log(item.call()); //여기서 item 의 타입 : Mobile
    }
}

교차타입 ( Intersection )

교차타입은 허용 가능한 타입을 정의하는 일종의 방식입니다. and 를 의미합니다.

교차타입으로 선언된 모든 타입의 속성을 포함하지 않으면 에러를 발생하게 됩니다. 둘 다 만족해야만 에러가 발생하지 않습니다.

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

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

  const toyCar: Toy & Car = { // 속성이 하나라도 빠지면 에러 발생
    name:'타요',
    start(){},
    color:'red',
    price:1000,
  }