TypeScript - 유니온 타입

타입스크립트는 변수의 타입을 지정해주는 게 기본이다.

하지만 역시나 개발자들은 자유도가 높은 걸 좋아한다.

 

타입을 한 가지가 아니라 여러가지로 설정해줄 수 있다.

let age: number | string = 12;
age = 23;
age = "24";

| 기호를 써서 age에 올 수 있는 타입을 number 또는 string이라고 지정해줄 수 있다.

그래서 age 자리에 number를 넣거나 string을 넣어도 에러가 발생하지 않음.

 

type Point = {
	x: number;
	y: number;
};

type Loc = {
	lat: number;
	long: number;
};

let coordinates: Point | Loc = { x: 1, y: 35 };
coordinates = { lat: 52, long: 15 };

커스텀 타입도 당연히 적용 가능

 

Point와 Loc이라는 타입을 선언해주었다.

 

마찬가지 |(바) 기호를 사용하면 두 개의 타입에 대해서 허용할 수 있고 위와 같이 coordinates라는 변수를 바꿔줘도 에러 없음.

 

function printAge(age: number | string): void {
	console.log(`You are ${age} years old`);
}

function calculateTax(price: number | string, tax: number) {
	if (typeof price === "string") {
		price = parseFloat(price.replace("$", ""));
	}
	return price * tax;
}

함수에서도 당연히 사용 가능

 

parameter로 받을 애들에 대해서 유니온 타입을 설정해줄 수 있음.

근데 문제가 있음. 

 

두번째 함수의 경우 price에 올 수 있는게 number 또는 string 인데 price * tax 와 같은 수식에서 string은 적용 불가능.

그럼 어쩌지?

 

string일 때만 따로 빼와서 바꿔주면 됨.

typeof 함수로 타입을 체크한 후에 타입에 맞게 코드 작성.

(단 typeof 체크할 때는 string 형식으로 해야됨. ex. typeof price===number 가 아니라 typeof price==="number" 이런식으로)

 

다음은 배열에서의 유니온 타입

 

const nums: number[] = [1, 2, 3];
const stuff: any[] = [12, 3, true, "asdg", { name: "park" }];

const stuff: (number | string)[] = [1, 3, "n"];

기존에 알던 배열 선언 방식이 위에꺼

number만 있던지 any만 있던지만 알고 있었는데

number나 string만 오게 하고 싶으면?

 

(number | string)[]라고 하면 된다.

 

저 괄호가 정말 중요하다

 

만약 괄호 없이 number | string[] 이렇게 되어있으면 number이거나  string만 있는 배열이라는 뜻이다.

 

 array에서는 특히나 오타를 조심하자.

 

 

타입스크립트 배운지 며칠된 초짜이지만 제일 신박했던 타입선언

literal type이다.

 

let mood: "Happy" | "Sad" = "Happy";

type DayOfWeek =
	| "Monday"
	| "Tuesday"
	| "Wednesday"
	| "Thursday"
	| "Friday"
	| "Saturday"
	| "Sunday";

let today: DayOfWeek = "Wednesday";

위와 같이 변수에 할당될 수 있는 후보군들을 정해줄 수 있다.

 

그래서 후보군이 아닌 애를 대입하려 하면 바로 타입스크립트 "응 너 안돼~"라고 할 것이다.

저렇게 요일 같은 거 미리 불러놓으면 오타방지나 다른 변수 값이 들어올 수 있는 걸 예방할 수 있으니깐 신박한 것 같다.