TypeScript 타입을 미리 정하기 애매할 때

TypeScript에서 타입을 미리 정하기 애매할 때 몇 가지 방법이 있다.

Any Type

any 타입은 모든 자료형을 허용해 준다.

let id: any;

id = 123;
id = 'kim';
id = [];

다양한 타입을 집어넣어도 에러가 나지 않는다. 그래서 타입 관련 버그가 생길 경우 추적하기 어렵다. 이를 막 사용하면 TypeScript를 쓰는 의미가 없어질 것이다.

Union Type

union 타입은 타입 2개 이상을 합쳐 새로운 타입을 만든다.

let id: number | string;

id = 'kim';
id = 1234;

id라는 변수엔 number 또는 string만 들어올 수 있다. 할당하는 순간 타입이 number 또는 string 중 하나로 변한다.

array, object의 타입 지정은 다음과 같다.

let arr: (number | string)[] = [1, '2', 3];
let obj: {data: (number | string)} =  {data: '123'}

Unknown Type

unknown 타입도 any와 똑같이 모든 타입을 집어넣을 수 있다.

let id: unknown;

id = 'kim';
id = 123;
id = undefined;
id = [];

any와 다른 점은 any의 경우 새로 생성하는 변수의 타입조차 해제해 버리지만 unknown은 그럴 수 없다.

// any
let id: any;

id = 'kim';
id = 123;

let id2: string = id; // 에러가 나지 않는다.

// unknown
let id: unknown;

id = 'kim';
id = 123;

let id2: string = id; // Type 'unknown' is not assignable to type 'string'.

unknown은 위와 같은 에러를 출력해 준다. any보다 안전하다고 볼 수 있다.

연산

산술 연산의 왼쪽은 'any', 'number', bigint' 또는 열거형 형식이어야 한다.

Any Type

let a: any;

a = 123;
console.log(a - 1); // 122

a = '123';
console.log(a - 1); // 122

a = 'abc';
console.log(a - 1); // NaN

any는 다 된다.

Unknown Type

let a: unknown;

a = 123;
console.log(a - 1); // 'id' is of type 'unknown'.

a = '123';
console.log(a - 1); // 'id' is of type 'unknown'.

a = 'abc';
console.log(a - 1); // 'id' is of type 'unknown'.

unknown의 경우 연산을 미연에 방지할 수 있다.

참고

• https://codingapple.com/unit/typescript-multiple-types-or-any-unknown/