관리 메뉴

흰둥씨의 개발장

[typescript] 리터럴과 유니온/교차 타입 본문

[오늘의 공부]/typescript

[typescript] 리터럴과 유니온/교차 타입

돈워리비해삐 2023. 6. 15. 04:48

리터럴 

//리터럴

const userName1 = "Bob"; //username1은 "Bob"
let userName2 = "tom";   //username2는 string으로 뜸 

// userName2 = 1; // let으로 선언된 변수임에도 에러남 : 초기에 할당된 값이 string이어서

//숫자넣고 싶으면 아래와 같이 명시적 작성 해야함 
let userName3: string | number = "Jane"; 
userName3 = 1; 

userName3 + 1 ;// 불가 string | number + 1은 허용 안되고 있음 (Narrowing으로 해결가능 : 함수 포스트참고)


type Job = "police" | "developer" | "teacher"; //Job은 3가지로만 입력가능

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

const user:User ={
	name :"Bob",
	job : "police" 
}

interface Student {
	name: string;
	grade: 1 | 2 | 3; //grade는 1,2,3중 하나만 입력가능 함 
}


유니온타입(union type)
ㄴ a | b로 표기하고 a or b를 의미함

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); //Car와 Mobile에 둘다 있는 color는 문제가 없지만, 
	//gift.start();  <= Car와 Mobile둘 중 하나에만 있는 속성을 쓸때는 에러가 나서 아래와 같은 조건문으로 표기할것 
	if(gift.name === "car"){  //조건이 많으면 switch문이 더 좋고, 이와 같은 것을 식별가능한 유니온타입이라고 함
		gift.start();
	} else {
		gift.call();
	}
}

 

교차타입 (intersection type)
ㄴ a & b로 표기하고, a and b를 의미함

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

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

const toycar : Toy1 & Toy2 = { //두개의 인터페이스의 모든 속성을 모두 적어야 함 
	name:"토마스",
	start() {},
	color: "blue",
	price: 10000,
}