6.4.1. The typeof Type Operator

자바스크립트는 이미 typeof 연산자를 표현식 컨텍스트에서 사용할 수 있도록 제공하고 있다.

console.log(typeof 'Hello world');

타입스크립트는 변수 혹은 프로퍼티의 타입을 참조하기 위해 타입 컨텍스트 내에서 이 typeof 연산자를 사용할 수 있도록 해준다.

let s = 'hello';
let n: typeof s;
// let n: string

이러한 방식은 기본 타입에 대해서는 그다지 유용하지는 않지만, typeof 연산자를 다른 타입 연산자들과 조합하면 편리하게 많은 패턴의 타입을 표현할 수 있다. 예를 들어, ReturnType<T> 라는 미리 정의된 타입을 살펴보는 것부터 시작해보자. ReturnType<T> 은 Type에 들어가는 '타입 요소'(값이나 함수 자체가 아님)의 반환 타입을 알려주는 유틸리티 타입이다. 자세한 내용은 타입스크립트 공식웹사이트 Reference > Utility Types에서 확인하자.

-typeof-predicate.ts-

type Predicate = (x: unknown) => boolean;
type K = ReturnType<Predicate>;
// type K = boolean

만약, 우리가 ReturnType<T>의 T부분에 함수 이름을 넣어 사용하려 하면, 아래와 같은 에러를 발생시킬 것이다.

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'?

값과 타입은 같은 것이 아님을 다시 한번 상기하자. f값이 가지고 있는 타입을 참조하기 위해서는, typeof를 써야한다.

-typeof-return-type.ts-

function f() {
	return { x: 10, y: 3 };
}
type P = ReturnType<typeof f>;
// type P = {
//   x: number;
//   y: number;
// }

6.4.2. Limitations

타입스크립트는 의도적으로 typeof를 사용할 수 있는 표현식의 종류를 제한할 수 있다.

식별자(예 - 변수 이름) 또는 해당 프로퍼티에 typeof를 사용할 수 있다. 이렇게 하면 실행중이지 않은 코드를 마치 실행중인 것처럼 혼동하여 작성하는 실수를 피할 수 있다.

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