[웹 풀사이클 데브코스 TIL] 12주차 Day 2 - 타입스크립트의 다양한 타입(유니온타입, 타입 별칭, 타입 가드 ...)

1. Any Type

- 어떤 타입의 데이터도 담을 수 있는 타입입니다. 타입 검사를 받지 않으며 주로 타입스크립트에서 타입 정보를 확실하게 알 수 없거나 타입 검사를 피하고자 할 때 사용됩니다.

let variable: any = 10;
variable = '문자열';
variable = true;

위 예시처럼 처음에 변수에 숫자 10을 담아 놓고, 그 변수 값을 문자열로 변경해도 에러가 발생하지 않습니다.

 

하지만 any타입을 남발하면 타입스크립트를 쓰는 의미가 없으며 복잡한 코드일수록 혼란을 주기 때문에,

타입을 제한 하지 않아야 하는 상황이 아니라면 지양합시다 !(•̀ᴗ•́)و ̑̑

 

2. Union Type

- 자바스크립트의 or(||) 연산자와같은 'A이거나 B이거나' 의 타입을 말합니다. 여러 타입 . 중하나가 될 수 있으며, 

`|` 기호를 사용하여 여러 타입을 연결할 수 있습니다.

let value: string | number;
value = '문자열';
value = 42;

변수 value는 string과 number타입을 사용할 수 있습니다.

let mixedArray : (number | string)[] =  [1, 'two', 3 , 'four'];

배열의 유니온 타입

3. Type Alias

- 특정 타입에 이름을 지어주는 기능입니다. 반복되는 복잡한 타입을 간결하게 표현 해주어 코드의 가독성을 높입니다.

type User = {
  name: string;
  age: number;
};

let user: User = {
  name: 'John',
  age: 25,
};

매번 name, age의 타입을 지정 해 주는 대신 타입 별칭으로 User를 만들어 사용합니다.

 

4. Type Guard

- 타입 가드는 런타임에서도 타입 정보를 검사하여 타입을 좁힐 수 있는 기능입니다. 주로 `typeof`, `instanceof`, `in` 연산자 등을 활용해서 사용합니다.

function printValue(value: string | number): void {
  if (typeof value === 'string') {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed(2));
  }
}

위 코드에서 typeof value === 'string'을 통해 특정 타입인지를 확인하는 타입 가드 역할을 볼 수 있습니다.