[Typescript] 타입스크립트 타입을 정하기 애매할 때 (union type, any, unknown)

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

타입스크립트는 타입지정을 하여 변수에 지정된 자료형만 들어올 수 있게 제한을 주는 것이다.

string, number, boolean, array, object 모두 지정할 수 있고 string 또는 number가 들어가게 지정해 줄 수 도 있다. 이번 글에서는 단일 지정이 아닌 문자 or 숫자가 들어올 수 있는 변수와 같은 타입지정을 어떻게 하는지 알아보겠다.

 

union type

문자 or 숫자가 들어올 수 있는 변수는 어떻게 만들까?

or 기호(|)를 써주면 된다. 이러한 타입을 union type이라고 하는데 타입 2개를 합친다는 뜻이다.

let 회원: number | string = 'kim'

이렇게 union type을 지정해 주었을 경우 중요한 점이 있다. 변수에 문자를 할당했으면 회원이라는 변수는 number | string이 아니라 string하나로 확정된다. 

다시 숫자를 할당하면 다시 number로 바뀐다

// number 할당
회원 = 123

이런 식으로 가변적인 타입을 만들고 싶을 대 union type을 사용하면 된다.

 

배열이나 오브젝트 속성값에 union type을 지정하려면?

let 회원들1: (number | string)[] = [1, '2', 3] // (O)
let 회원들2: number | string[] = [1, '2', 3] // (X) number 혹은 string[]가 들어올 수 있다는 뜻이기 때문에 안됨
let 오브젝트: { a: string | number } = { a: '123' }

any type

any type은 모든 자료형을 허용해 준다. 타입스크립트는 변수에 타입을 정해주는 건데 모든 자료형을 허용해 주는 것은 타입스크립트 쓰는 의미가 없어지는 게 아닌가 싶겠지만 any type은 타입이 아니라 타입실드가 해제되는 것이다. 일반 자바스크립트 문법처럼 사용할 수 있음으로 타입 관련 버그를 잡아주지 않는다.

let 이름: any // any타입 모든 자료형 허용해줌
이름 = 123
이름 = []

unknown type

unknown type도 any type과 유사하게 모든 자료형을 허용해 주지만 unknown type이 더 안전하다.

let 이름1 : unknown;
이름1 = {}

let 변수1: string = 이름1 // 오류 : string으로 타입지정해줬는데 {} 들어오니 버그가 발생한다
// 이름1이 unkown type이 아닌 any type이었다면 버그가 발생하지 않는다

이름1 - 1 // 오류 : 타입스크립트의 엄격함에 대해 - 와 같은 간단한 수학연산도 타입이 맞아야 한다.

 

let 나이:string|number
나이 + 1 // 오류 : 될것 같지만 에러를 뱉는다.
// 타입이 맞는데 왜 +1이 안될까?
// (문자열일 경우 "문자1", 숫자일경우 연산 결과값이 나올 수 있다고 생각할 수 있음)
// ex 'kim' + 1 // kim1
// ex 2+1 //3
// 타입스크립트는 타입이 엄격하기 때문에
// string type + 1 (허용)
// number type + 1 (허용)
// 하지만 string|number type + 1 같은 union type에는 허용되지 않는다.

let 나이1: unknown = 1;
나이1 - 1 // 오류 : 변수가 분명 1인데 -1이 왜 안될까?
// 타입스크립트는 엄격한 걸 좋아하기 때문에 나이1은 숫자가 들어가 있지만 여전히 unknown type이기 때문에 에러를 뱉는다.
// 평소 자바스크립트에서 코딩하듯 자유롭게 짜는건 타입스크립트에서 불가능하다.
// 에러가 많이 나기 때문에 타입스크립트 룰에 따라서 코드를 작성해야 한다.

 

🌼 참고사이트

타입스크립트 기본 타입 정리 (primitive types)