Any, Union Type, Intersection Type, Type Aliases & Type Guards에 대해서 알아보기

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