5 Types(any, union) type guard

 

any는 어떤타입이든 모두 OK! 체크 안할거야

let someValue: any = 5;
someValue = "any";
someValue = true;

편해 보이지만 최대한 안쓰는 것이 좋다. 동적으로 어떤 타입이 들어올 지 모를 때 주로 쓴다!

 

union 어떤타입이 올지는 모르겠는데 number or string인건 확실해 !

제한된 타입들을 동시에 지정하고 싶을 때 사용한다.

let someValue: Number | String = 5;
someValue = "free";
someValue = true;

여기서는 true라는 boolean값을 지정해주었을 때 에러가 발생한다 !

'boolean' 형식은 'String | Number' 형식에 할당할 수 없습니다. 

let orderID: number | string;

const cal = (price: number | string, qty: number): void => {};

const findOrderID = (
  customer: { contomerID: number | string; name: string },
  productId: number | string
): number | string => {
  return orderID;
};

union타입을 많이쓰게되면 한 눈에 알아보기도 힘들고 코드가 길어진다. 

이럴 때 사용할 수 있는게 Type alias이다.

type StrOrNum = number | string;
let orderID: StrOrNum;

const cal = (price: StrOrNum, qty: number): void => {};

const findOrderID = (
  customer: { contomerID: StrOrNum; name: string },
  productId: StrOrNum
): StrOrNum => {
  return orderID;
};

type StrOrNum 이라는 타입을 생성하여 각각 대입해주면 좀더 알아보기 쉽게 바꿀 수 있다.

 

type StrOrNum = number | string;
let itemPrice: number;

const setItemPrice = (price: StrOrNum): void => {
  itemPrice = price;
};

마지막으로 이러한 코드가 있다고 한다. 겉보기에는 문제가 없어보이지만 

'StrOrNum' 형식은 'number' 형식에 할당할 수 없습니다.
'string' 형식은 'number' 형식에 할당할 수 없습니다.ts(2322)

라는 오류메시지가 발생한다. price값에는 string과 number타입 둘다 들어올 수 있지만

itemPrice에는 number타입만 들어올 수 있기때문에 경고를 하는 것이다.

이때에는 typeof 와 조건문을 사용하여 타입가드를 만들어 오류를 방지할 수 있다.

type StrOrNum = number | string;
let itemPrice: number;

const setItemPrice = (price: StrOrNum): void => {
  if (typeof price === "string") {
    itemPrice = 0;
  } else {
    itemPrice = price;
  }
};

이렇게 변경을 해주면 더이상 오류가 발생하지 않는다.

또한

type Score = 'A' | 'B' | 'C' | 'D';

라는 타입을 만들어서 프로퍼티의 타입으로 지정하면
'A','B','C','D' 이외의 값은 들어올 수 가 없다.

 

interface Car {
  name: "car"; // car타입임에 주의 string타입 아님
  color: string;
  start(): void;
}
interface Mobile {
  name: "mobile"; // car타입임에 주의 string타입 아님
  color: string;
  call(): void;
}

function getGift(gift: Car | Mobile) {
  console.log(gift.color);
  if (gift.name === "car") {
    gift.start();
  } else {
    gift.call();
  }
}

getGift에서 매개변수 gift에 두가지 interface타입이 올 수 있는데

color는 공통 프로퍼티라 별 문제가 없지만

start(), call()메서드를 사용하기 위해선 조건문을 붙여주어야한다. (안붙이면 어떤 interface가올지 모른다고 오류 메시지)

interface Car {
  name: string;
  start(): void;
}
interface Toy {
  name: string;
  color: string;
  price: number;
}
// 모든 속성을 다 기입해주어야함
const toyCar: Car & Toy = {
  name: "장난감 자동차",
  start() {},
  color: "white",
  price: 1000,
};

교차타입은 &을 사용하여 두가지 interface를 모두사용하는 방법이다. 이 경우에는 두 속성 모두를 사용해줘야 한다 

price를 주석처리하면 오류가 발생!