typeof 타입 연산자

typeof 연산자는 자바스크립트에 이미 있던 거예요. 그런데 TypeScript에서는 이 연산자를 타입 영역에서도 쓸 수 있어요. 값의 타입을 손쉽게 가져오는, 타입 조작의 기초 중 하나라고 보시면 돼요. 아직 typeof를 타입에 써본 적 없다면 이 페이지에서 개념부터 차근차근 잡아가 볼게요.

출처: TypeScript 공식문서

본문

The `typeof` type operator

자바스크립트에는 이미 표현식(expression) 영역에서 쓸 수 있는 typeof 연산자가 있어요.

// Prints "string"
console.log(typeof "Hello world");

TypeScript는 여기에 더해 타입(type) 영역에서도 쓸 수 있는 typeof 연산자를 추가했어요. 변수나 프로퍼티의 타입을 가리킬 수 있는 거죠.

let s = "hello";
let n: typeof s;

let n: string

기본 타입만 다룰 때는 이게 크게 유용해 보이진 않을 거예요. 하지만 다른 타입 연산자랑 조합하면 typeof로 아주 편하게 많은 패턴을 표현할 수 있답니다.

예를 들어 타입스크립트에 미리 정의된 ReturnType<T>를 볼게요. 이건 함수 타입을 받아서 그 함수의 반환 타입을 뽑아주는 타입이에요.

type Predicate = (x: unknown) => boolean;

type K = ReturnType<Predicate>;

type K = boolean

만약 함수 이름 자체에 ReturnType을 쓰려고 하면, 아주 교훈적인 에러를 만나게 돼요.

function f() {
  return { x: 10, y: 3 };
}

type P = ReturnType<f>;
// 'f' refers to a value, but is being used as a type here. Did you mean 'typeof f'?
//    2749  'f' refers to a value, but is being used as a type here. Did you mean 'typeof f'?

여기서 핵심을 짚어볼게요. 값(value)과 타입(type)은 서로 다른 것이에요. f라는 값이 가진 타입을 가리키고 싶다면 typeof를 붙여주면 돼요.

function f() {
  return { x: 10, y: 3 };
}

type P = ReturnType<typeof f>;

type P = {
    x: number;
    y: number;
}

Limitations

타입스크립트는 typeof를 쓸 수 있는 표현식의 종류를 의도적으로 제한하고 있어요.

구체적으로 말하면, typeof는 식별자(identifier, 즉 변수 이름)나 그 프로퍼티에만 쓸 수 있어요. 이 제한은 "실행된다고 생각했는데 사실은 실행되지 않는 코드" 같은 혼란스러운 함정을 피하게 해줘요.

// Meant to use = ReturnType<typeof msgbox>
let shouldContinue: typeof msgbox("Are you sure you want to continue?");
// ',' expected. 1005  ',' expected.

더 알아보기

Keyof Type Operator — keyof 연산자를 타입 영역에서 쓰는 방법을 다뤄요.
Indexed Access Types — Type['a'] 문법으로 타입의 일부만 꺼내 쓰는 방법을 알아봐요.

typeof 타입 연산자