[땅콩코딩] 유니언 타입, 타입 가드, 타입 별칭

Any, Union Type, Type Aliases & Type Guards

 

Any 타입

어떠한 타입이든 할당될 수 있다.

 

아래와 같이 먼저 숫자로 할당하고, 이후에 문자열이나 불린 타입으로 재할당해도 아무런 에러가 발생하지 않는다.

하지만, 타입스크립트에서는 타입에 관한 더 많은 정보를 명시할 수록 더 좋다!

그래서 좀더 깔끔하고 효과적인 코드의 유지 보수를 할 수 있다.

그렇기 때문에 any 타입은 피하는게 좋다.

만약 타입 명시가 어려운 경우, 예를 들어 정보를 가져올 때 변수 타입을 알 수 없어서 타입 지정을 못하는 경우, 이런 경우에만 사용한다.

 

 

제한된 타입들을 동시에 지정하고 싶을 때는 어떻게 해야될까?

 

Union 타입

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

let someValue : number | string 이런식으로 나눠주기만 하면 된다.

이때 someValue는 number나 string 둘 중 아무거나 할당될 수 있다.

 

예시를 들어보자.

이때는 price가 number나 string 값을 할당받는데, boolean 타입인 true를 할당할 경우 지정된 타입이 아니기에 에러가 발생한다.

 

 

---

하지만 이때 아래와 같이, 같은 조합인 유니언 타입이 계속 반복될 경우,
어떻게 코드를 향상시킬 수 있을까?

 

 

이때는 같은 코드를 반복하는 것 보다는, 코드를 타입으로 지정하고 재활용하는 것이 좋다!

이를 Type Aliases라고 한다.

 

---

Type Aliases

: 타입 키워드를 사용해서 새로운 타입을 선언하는 것

위 코드를 Type Aliases를 사용한 것.

 

Type Guards, 타입 가드

 

위 예시를 보면 매개변수 price는 string 값과 number 값이 조합된 유니온 타입을 타입으로 가진다.

이렇게 함수로 전달된 매개변수의 값을 number 타입을 가진 itemPrice의 값으로 할당한다.

 

그리고 선언된 함수 밑에 setItemPrice 함수를 부르고 숫자 50을 넣어준 코드이다.

 

itemPrice 에러

이때 에러가 발생하는 에러가 발생한다. 에러 메시지의 이유는 price 매개변수가 number 타입이 될 수도 있고 string 타입이 될 수도 있기 때문이다.

만약 price 변수가 string 타입의 경우, number 타입을 가진 itemPrice 변수에 할당될 수 없기 때문에 이러한 메시지가 나타난다.

 

이러한 상황이 발생할 때, 어떻게 이러한 문제를 해결할 수 있을까?

 

 

자바스크립트에 내장되어 있는 typeof Operator

Typeof 연산자와 조건문 사용한다.

 

Typeof Operator는 변수의 데이터 타입을 반환하는 연산자이다.

 

Union 타입일 때는 이렇게 typeof를 사용해서 코드 검증을 수행하는 것이다. 이를 타입스크립트에서 타입 가드라고 부른다.

 

자세한 내용은 구글에 typescript type guards라고 검색해보자!

https://www.typescriptlang.org/docs/handbook/advanced-types.html 

Documentation - Advanced Types