typeof로 타입스크립트 타입 알아보기

Javascript의 타입

Javascript의 타입은 기본적으로 원시형의 Number, String, Boolean, null, undefined, Symbol, BigInt와 참조형의 Object가 있습니다.

Typescript에서 커스텀 타입을 정의하고 사용해도, 기본적인 틀은 Javascript의 타입과 다르지 않습니다.
실제 타입을 확인해보기 위한 방법으로 typeof를 사용할 수 있습니다.

    const a: string = 3;
 
    console.log(typeof a);

위 코드를 실행하면 무슨 값이 나올까요? String이 나올까요 아니면 Number가 나올까요?
사실 정답은 없습니다. 이미 String 타입으로 선언된 a에 Number형인 3을 할당하려 하였기 때문에 컴파일 단계에서 오류가 발생합니다.

Type 'number' is not assignable to type 'string'.

아래와 같이 코드를 수정한다면 String이 출력될 것입니다.

    const a: string = '3';
 
    console.log(typeof a);

이렇듯 원시형 타입의 경우는 너무나도 간단합니다. 사실 typescript의 경우 이미 타입을 결정하고 코드를 작성하는 경우가 많기 때문에 typeof를 사용할 일이 많지는 않습니다.

그렇다면 아래와 같은 커스텀 타입은 어떨까요?

type Person = {
    name: string;
    age: number;
}
 
const b: Person = {
    name: "John",
    age: 23,
}
 
console.log(typeof b);

Person으로 나올까요? Object로 나올까요?
정답은 Object입니다. typeof로 반환되는 값은 위에서 언급한 Javascript의 기본 자료형 8개와 Function, 호스트 객체만 존재합니다. 커스텀 타입 Person은 객체이기 때문에 Object로 출력됩니다.

참고한 자료

우아한 타입스크립트 with 리액트 - 우아한테크
https://ko.javascript.info/types
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/typeof