✅ Union Types
유니온 타입이란 JavaScript의 OR 연산자( || )와 같이 A이거나 B라는 의미의 타입이다. 즉, 유니온 타입을 이용하면 여러 타입의 값을 가질 수 있게된다.
let age: number | string | boolean = 21;
age = 23;
age = "24";
age = true;
적절한 예시는 아니지만 간단한 예시로 유니온 타입을 사용했다. age는 세개의 Type 중 어느 것을 사용해도 상관 없다.
type Point = {
x: number;
y: number;
};
type Loc = {
lat: number;
long: number;
};
let coordinates: Point | Loc = { x: 1, y: 34 };
coordinates = { lat: 321.214, long: 23.445 };
초기 값으로 설정한 객체는 Point 타입의 패턴을 따르고, 재할당한 객체는 Loc 타입의 패턴을 따르기에 문제가 없다.
🤔 함수에서의 유니온 타입
function printAge(age: number | string) {
console.log(`You rae ${age} years old`);
}
매개변수 age가 number 혹은 string을 타입으로 받는 기본적인 형태이다.
function calculateTax(price: number | string, tax: number) {
return price * tax;
}
위 코드는 에러가 발생한다. price의 타입이 number | string 이기에, string이 올 경우 산술 연산이 불가하기 때문이다.
The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
price.replace("$", "")
// return price * tax
문자열에 $이 포함된 경우 빈 문자열로 바꿀려고 하는데 해당 코드 또한 에러가 발생한다. number타입엔 $가 포함돼서 올 수 없기 때문이다. 위와 같은 문제들을 해결하기 위한 방법은 무엇일까? 바로 타입 좁히기(Type Narrowing)를 적용하면 된다.
👊 타입 좁히기(Type Narrowing)
타입 에러를 피하기 위해 타입을 더 정확한 타입으로 변할 수 있다.
function calculateTax(price: number | string, tax: number) {
if (typeof price === "string") {
price = parseFloat(price.replace("$", ""));
}
return price * tax;
}
조건문을 사용하여 해당 타입일 경우 수행하는 동작이 달라지게 하여 오류를 피할 수 있다. price가 string일 경우 파싱과 부동수 처리를 통해 숫자로 변환되어 정상적인 연산이 실행된다.
👉 유니온 타입과 배열
const stuff: (number | string)[] = [1,2,'3','str']
number와 string을 타입으로 갖는 배열을 만들었다. 해당 유니온 타입은 꼭 괄호로 감싸주어야 한다. 괄호로 감싸지 않으면 string 타입을 갖는 배열 혹은 number 원시값 타입을 갖게 된다.
const stuff: number[] | string[] = [1,2,'3','str'] // Error
비슷해보이지만 염연히 다른 두 코드이다. 위 배열은 number타입만 갖거나, string만 갖는 배열을 만들 수 있다.
const coords: (Point | Loc)[] = [];
coords.push({ lat: 321.214, long: 23.445 });
coords.push({ x: 80, y: 90, lat: 32.2 });
위와 같이 커스텀 타입도 선언할 수 있다.
✅ Literal Types
리터럴 타입은 말 그대로 리터럴 자체를 타입으로 지정하는 것이다.
let zero: 0 = 0;
zero라는 변수는 0 말고는 할당할 수 없다. 숫자 타입이 아닌 숫자 0을 타입 선언한 것이다. 리터럴 타입을 혼자 사용하는 건 의미가 없어도 유니온 타입에 리터럴 타입을 활용하는 방법은 유용하다.
const giveAnswer = (answer: "yes" | "no" | "maybe") => {
return `The answer is ${answer}.`;
};
⭕ giveAnswer("no");
❌ giveAnswer("oh no");
type DayOfWeek = "Monday" | "Tuesdaty" | "Wednesday" | "Thursday" | "Friday" | 'Saturday' | "Sunday";
let today: DayOfWeek = "Friday"
리터럴 타입을 다양하게 활용할 수 있다.
'개발자의 공부 > TS' 카테고리의 다른 글
[TS] Type Alias와 Interface 정복하기!! (0) | 2023.01.10 |
---|---|
[TS] Enums (0) | 2023.01.10 |
[TS] Array Types (0) | 2022.12.20 |
[TS] 객체 타입 (0) | 2022.12.17 |
[TS]Object (0) | 2022.12.17 |