[TypeScript] union type과 any type그리고 Type Guard

TypeScript

TypeScript에서의 any Type

어떤 형식의 변수든 모두 담을 수 있다.
아래처럼 number, string, boolean 등 모든 변수를 담을 수 있습니다. 즉 해당 변수의 타입을 타입 체크를 하지 않겠다는 의미가 됩니다.
하지만 TypeScript에서는 타입스크립트에게 더 많은 정보를 명시할수록 좋습니다.
그렇기 때문에 any Type을 사용하는 것은 좋지 않습니다!
저는 써드 파티 라이브러리를 사용해서 해당 타입의 타입을 지정하기 어려울 경우 사용합니다!

let value: any = 5;
value = "whatEver";
value = true;

TypeScript에서의 유니언 타입

변수에 number, string을 사용하고 싶을 경우에는 유니언 타입을 사용하게 됩니다.
그렇기 때문에 number, string이 아닌 변수가 들어가게 되면 에러가 발생하게 됩니다.

let value: number | string = 5;
value = "number or string";
value = true;  --> Error 발생

이렇게 type alias를 사용하여 반복되는 number | string을 피할 수 있습니다!

type StrOrNum = number | string;

let value: StrOrNum = 5;
value = "number or string";

TypeScript에서의 타입으로 인한 오류가 발생했을 경우, Type Guard

addNum이라는 함수를 호출하게 되면 에러가 납니다. a라는 arguments가 문자일수도, 숫자일수도 있기 때문입니다. 이럴 경우에는 자바스크립트에 내장되어 있는 Typeof연산자와 조건문을 사용하여 에러를 해결할 수 있습니다.

type StrOrNum = number | string;

const addNum = (a: StrOrNum, b: number): number => {
  return a + b;
}

addNum(2,5)

Typeof 연산자를 사용

type StrOrNum = number | string;

const addNum = (a: StrOrNum, b: number): number => {
  if(typeof a === 'string') {
    return 0;
  }
  else {
    return a + b;
  }
}

addNum(2,5)