타입스크립트 - 타입을 지정하기 애매할 때 (union, any, unknown)

Sungw__k·2022년 10월 13일
0
post-thumbnail

프로그래밍을 하다보면 이 변수에 어떤 타입이 들어갈지 애매한 경우도 있는데 이 때 사용하는 방법이 몇가지 있다.


Union type

'이 변수에는 string, number 중 하나가 들어갈거야' 라고 타입을 정하고 싶을 때 | 연산자를 사용한다.

let 변수 : string | number = 값;

이러면 변수에는 string 또는 number만 들어올 수 있고 할당하는 순간 타입은 둘 중 하나로 바뀐다. 이를 Union type 이라고 한다.

ley 배열 : (string | number)[] = [];

배열 속 요소의 타입을 union type으로 설정하고 싶으면 위 처럼 괄호 안에서 해줘야 하는데 괄호를 하지 않으면 배열이라는 변수가 string 또는 number[]타입을 갖도록 하라는 얘기가 되므로 괄호를 꼭 쳐야 한다.


any type

any 타입은 말 그대로 아무거나 들어가도 되는 타입이다. 쉽게 말하면 타입스크립트를 해제하는 것이다.

let 이름: any = 'kim';
이름 = 123;
이름 = undefined;
이름 = [];

any 타입은 타입스크립트의 타입 명시를 해제하기 때문에 아무런 타입이나 넣을 수 있다. 따라서 버그 추적도 어렵기 때문에 되도록이면 사용하지 않는게 좋다.


unknown type

그래서 unknown을 사용한다. unknown 역시 모든 타입의 자료를 넣을 수 있고 자료를 집어넣어도 타입은 그대로 unknown을 유지한다.

let 이름: unknown;

let 변수1: string = 이름;
let 변수2: boolean = 이름;
let 변수3: number = 이름;

그런데 위 처럼 다른 타입의 변수에 unknown 타입의 변수를 할당하려고 하면 에러가 발생한다. any는 에러가 발생하지 않기에 unknown을 사용하는게 조금이나마 더 안전하다. 그러나 any나 unknown은 코드짜면서 부여할 일이 거의 없다.



let 나이: string|number;
나이 + 1;

추가로 자바스크립트에선 string이든 number이든 변수에 +1을 해도 에러가 나지 않지만 타입스크립트에서 위처럼 코드를 짜면 에러가 발생한다.

그 이유는 나이 변수가 Union타입이기 때문인데 타입스크립트는 타입이 확실해야만 위와 같은 연산을 수행해준다. 따라서 Union이나 Unknown같은 타입의 변수에 연산을 수행하려면 narrowing, assertion 스킬을 사용해야 하는데 이는 다음 포스트에서 작성하겠다.

0개의 댓글