⌨️ conceptualization/Typescript
Any, Union Type, Intersection Type, Type Aliases & Type Guards에 대해서 알아보기
awesomeyelim
2022. 9. 11. 17:10
728x90
Any Type 이란?
어떠한 타입이든 모두 ok(타입체크 안하겠다 라는 의미)
BUT ❗️ 왠만하면 쓰지 않는 것이 좋다.
WHY ❓
타입스크립트는 타입에 관한 더 많은 정보를 명시할수로 좀더 명확하게 개발자의 의도를 기술할 수 있으며,
타입에러를 컴파일시 잡아낼수 있다. -> 효과적인 코드의 유지보수
🧠 그렇다면 제한된 타입들을
동시에 지정하고 싶을때 사용하는 방법으로는 ?
유니언 타입(Union Type) & 교차 타입
📌 유니언 타입(Union Type)
변수값을 여러타입으로 지정가능하다.
문법(Syntax)
let someValue : number | string
someValue 의 타입을 number 혹은 string 값으로 지정가능하다.
let day : number | string = 1;
day = '하루'
day = false // 📌 boolean 값은 타입에 포함되지 않으므로 에러메세지가 발생된다.
📌 교차 타입(Intersection Type) 과 함께 보는 유니온 타입(Union Type)
1. 식별 가능한 유니온타입(union type)
👉🏻 실제 쓰여지는 예시를 통해 유니온 타입에 대해 좀더 알아보자 !
interface Beverage {
name: "tea";
ingredients: ["mint", "water", "green"];
drink(): void;
}
interface Dessert {
name: "cake";
ingredients: ["flour", "egg", "wipecream"];
eat(): void;
}
function enjoy(food: Beverage | Dessert) { // 📌 유니온타입 : 두개의 타입중 하나를 포괄하는 '|' 연산자를 사용하였다.
console.log(food.ingredients);
if (food.name === "tea") { //📌 error를 방지하기 위해 파라미터 내 프로퍼티를 분기처리를 하였다.
food.drink();
}else{
food.eat();
}
}
2. 교차타입 (Intersection type)
👉🏻 실제 쓰여지는 예시를 통해 교차타입에 대해 좀더 알아보자 !
interface Beverage {
name: string;
ingredients: string[];
drink(): void;
}
interface Dessert {
name: string;
ingredients: string[];
eat(): void;
price: number;
}
const ameal: Beverage & Dessert = { //📌 교차타입: 두개의 타입을 포괄하는 '&' 연산자를 사용하여 지정하였다
name: "ameal",
ingredients: ["flour", "egg", "wipecream"],
drink() {},
eat() {},
price: 5000,
};
❓ 만약 같은 조합이 계속 반복될 경우 어떻게 코드를 향상 시킬수 있을까?
같은 코드를 반복하는 것 보다는 코드를 타입으로 지정하고 재활용하자 바로 -> Type Aliases
Type Aliases
타입 키워드를 사용하여 새로운 타입을 선언하는 것
type DayType = number | string;
- 이런식으로 type Aliases를 사용하게 되면 다음과 같이 좀더 깔끔한 코드로 나타낼수 있다.
type DayType = number | string;
let day : DayType = 1;
day = '하루'
const test1 = (a : DayType, b : DayType) : void => {}
Type Guards
typeof Operator를 사용하여 코드 검증을 수행하는것
(typeof Operator 말고도 여러 방법이 있음)
- 다음과 같은 코드가 있다고 가정해 보자
type DayType = number | string;
let day = 1;
const test1 = (a: DayType): void => {
day = a; // 📌 a가 유니온 타입으로(number 또는 string)값으로 설정되어 있으므로 error 메세지가 발생 하게된다.
};
👉🏻 이런경우 typeof Operator(연산자)와 조건문을 사용하여 해결할 수 있다.
type DayType = number | string;
let day = 1;
const test1 = (a: DayType): void => {
if (typeof a === "string") {
day = 0;
} else {
day = a;
}
};
test1(50);
참고)
땅콩코딩 : https://www.youtube.com/watch?v=lmjQh2LrH94
코딩앙마 : https://www.youtube.com/watchv=QZ8TRIJWCGQ&list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&index=6