[코딩애플] Union type, Any type, Unknown type

Union type

정의

// 문자열
let memberName : string = '장원영';

// 숫자
let age : number = 21;

// 불리언
let isSinger : boolean = true;

// 배열
let IveMembers : string[] = ['장원영', '안유진', '가을'];

// 객체
let wonYoung : { name: string, group: string } = { name: '장원영', group: '아이브' };

 

모든 변수가 하나의 자료형으로 정해지면 좋겠지만, 숫자가 될 수도 있고 문자열이 될 수도 있는 경우도 많다. 그리고 배열 안에서도 인덱스마다 들어가는 값이 다를 수도 있고, 객체는 말할 것도 없다.

 

이런 경우 여러 가지의 자료형을 or 연산자 ( | )를 통해 지정해주는 것을 Union type이라 한다.

예시

let userName : string | number = '장원영';
let userAge : (string | number) = 100;

 

괄호의 유무와 상관없이 위 두 개의 의미는 같다. 타입이 string 또는 number 중 하나가 와도 된다는 의미이다. 둘 중 어떤 게 올 지 몰라서 둘 다 허용해주는 개념이다.

 

그런데 배열과 객체에서는 조금 다르다.

let myArr: number[] = [1, '2', 3];

// number[] 아니면 string[] 이라는 의미임. 배열의 인덱스는 모두 하나의 자료형이 되어야 함.
let myArr: number | string[] = [1, 2, 3];

// 소괄호로 묶으면 둘 다 허용한다는 의미의 union type이 됨.
let myArr: (number | string)[] = [1, '2', 3];

let myObj: { data : number } = { data : '123' };

// 객체에서는 둘 다 같은 의미다. 둘 중 어느 것이 올 지 모르니 둘 다 허용한다는 의미.
let myObj: { data : number | string } = { data: '123' }; 
let myObj: { data : (number | string) } = { data: '123' };

 

배열은 union 타입에서 소괄호의 유무에 따라 배열의 값이 완전히 달라질 수 있고, 객체는 해당사항이 없다.

Any Type

any 타입은 그 어떤 자료형도 허용한다는 의미이다. 외부 API를 가져오는 경우 외부 API가 어떤 자료형인지 예측하기 힘들 때 정도 사용한다. 하지만 그 외에는 일반적으로 사용하지 않는 것이 좋다.

어떤 자료형도 허용한다는 것은 자바스크립트의 특성인데, 그게 단점이어서 타입스크립트가 나온 것이고 any 타입을 남발하면 타입스크립트의 엄격함의 장점이 사라지고 타입스크립트를 사용할 이유가 없어진다.

 

let userName: any = '장원영';
userName = 123;
userName = undefined;
userName = [];

 

any 타입을 설정하면 그 어떤 자료형을 사용해도 된다.

Unknown Type

만약 꼭 any 타입을 사용해야 하는 상황이면 unknown 타입을 사용하는 것을 고려해봐도 좋다.

unknown 타입도 어떤 타입이 와도 상관 없지만, any와의 결정적인 차이는 any 타입은 위의 예제처럼 어떤 자료형을 재할당 하더라도 타입이 지정되지 않는다. unknown 타입도 값이 재할당 되더라도 여전히 unknown 타입이지만 마치 마지막으로 재할당 된 자료형을 따르는 것처럼 보여진다.

 

그래서 아래와 같은 차이가 발생하게 된다.

 

자바스크립트에서는 1 + "1"이 가능하다 답은 "11"이라는 string 타입으로 반환된다.

타입스크립트도 자바스크립트를 베이스로 하기에 문자열 - 숫자가 가능하다. 하지만 정확히 문자열로 정해진 변수에 대해서만 허락한다.

그런데 unknown은 알 수 없는 상태이기 때문에 이를 엄격하게 허락하지 않는다.

하지만 any 타입은 가능하다.

 

타입스크립트에서는,

덧셈은 정확하게 정해진 자료형에 대해서만 허락하고,

뺄셈은 숫자형끼리만 허용한다. (자바스크립트는 둘 다 됨. 1 - "1"은 0으로 반환됨.)

 

그리고 data.name과 같은 점 표기법은 객체, data[0]와 같은 대괄호 표기법은 배열에만 허용하는데, any는 이 모든 것을 무시하고 unknown은 이 모든 것을 허용하지 않는다.

any 타입과 unknown 타입의 차이

공통점

일단 타입으로 지정 해 놓으면 어떤 타입이든 와도 된다.

차이점

• any 타입은 타입스크립트의 변수 타입 체크 기능을 꺼 버린다.
• unknown 타입은 어떤 타입이 와도 되는 건 맞지만 변수 타입 체크 기능은 유지한다. 이후 어떤 자료형이 할당되더라도 unknown 타입과 엄격하게 비교한다.

// any 타입

let anything: any;

anything = 42;
anything = 'hello';
anything = true;
anything = { x : 1 };

cosnole.log(anything.toUpperCase()); // 사용 가능

 

any 타입은 어떤 메서드를 써도 허용이 된다.

 

let uncertain: unknown;

uncertain = 42;
uncertain = 'hello';
uncertain = true;
uncertain = { x : 1 };

console.log(uncertain.toUpperCase()); // 타입을 확인받기 전에는 어떤 메서드도 사용 불가능

if (typeof uncertain === 'string') {
  console.log(uncertain.toUpperCase());
}
// 타입을 조건문 등으로 확인해주는 절차가 있어야 메서드를 정확하게 사용 가능.

 

unknown 타입은 타입이 정확하게 확인을 받아야만 그에 맞는 메서드를 사용할 수 있음.

문자열에만 사용 가능한 메서드는 문자 타입임을 확인 받아야, 숫자 타입에만 사용 가능한 메서드는 숫자 타입임을 확인 받아야, 객체 타입에만 사용 가능한 메서드는 객체 타입 임을 확인 받아야 하는 등의 작업이 선행된다.