TypeScript, 특수 타입

유니온 타입 (Union Type)

let fruits1: (string | number)[] = ['apple', 'banana', 'mango', 1, 2, 3, 4];
let fruits2: Array<string | number> = ['apple', 'banana', 'mango', 1, 2, 3, 4];

console.log(fruits1);
console.log(fruits2);

 

Array를 선언할 때 다음과 같이 OR('|') 연산자를 사용하여 다중 타입을 사용할 수 있습니다.

 

Unknown Type

let testUnknown: unknown[] = ['apple', 'banana', 'mango',1 ,2 ,3 ,4, true];

console.log(testUnknown);

다음과 같이 일반 자바스크립트처럼 타입을 지정하지 않는 타입도 존재합니다.

물론 타입추론이 있긴 합니다.

 

그렇다면 자바스크립트에서 Any와 같냐? 라고 한다면

 

Any보다 unknown 타입이 소유하고 있는 타입을 검사해주는 안전한 장점이 있습니다.

 

코드로 보면 이해하기 쉽습니다.

let value: any;

value = "Hello";
value = 42;
value = true;

console.log(value.toUpperCase());

let value: unknown;

value = "Hello";
value = 42;
value = true;

// 직접 사용 불가 (컴파일 오류 발생)
// console.log(value.toUpperCase());

// 타입 검사를 거쳐야 사용 가능
if (typeof value === "string") {
  console.log(value.toUpperCase()); // 정상 동작
}

 

Any는 런타임 오류가 나는 것을 확인할 수 있으며

unknown은 컴파일 오류가 나는 것을 확인할 수 있습니다

 

둘 다 오류가나지만 컴파일 과정에서 잡아주는 unknown 타입이 훨씬 안전하다 볼 수 있지요

런타임 오류는 예측하기가 어렵기 때문입니다.

 

Enum Type

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT"
}

console.log(Direction.Up); // "UP"

바닐라 자바스크립트에는 enum 타입이 존재하지 않지만

 

타입스크립트는 Enum을 지원합니다.

 

하위 타입 (Null, Undefined)

let value1: null = null;
let value2: undefined = undefined;

let und: undefined = null
let nul: null = undefined

console.log(value1, value2); // null undefined

let str: string = null;      // 오류 (컴파일 옵션에 strictNullChecks가 켜져 있으면)
let num: number = undefined; // 오류

명시적으로 null, undefined 타입이 존재합니다.

 

이 두 타입은 하위 타입으로 다른 모든 타입에 할당이 가능합니다 (심지어 코드에 나온 것처럼 서로 할당도 가능합니다)

단, 컴파일 옵션에 strictNullChecks : true 라면 컴파일 에러에 잡힙니다.