[TIL] 23.03.15 TS 핸드북 - Typeof Type Operator

https://www.typescriptlang.org/ko/docs/handbook/2/typeof-types.html

Documentation - Typeof Type Operator

typeof 타입 연산자

자바스크립트에 이미 typeof 연산자가 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/typeof

typeof - JavaScript | MDN

 

타입스크립트는 타입 컨텍스트에서 변수나 프로퍼티의 타입을 추론할 수 있는 typeof 연산자를 추가한다.

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

 

이는 기본 타입에서는 별로 유용하진 않지만, 다른 타입 연산자와 함께 사용해 많은 패턴을 편리하게 표현할 수 있다.

 

예를 들어, 미리 정의된 유틸리티 타입인 ReturnType<T>부터 살펴보면, 해당 타입은 함수 타입을 받으면서 반환되는 타입을 리턴한다.

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

 

ReturnType은 함수 타입을 받기 때문에 함수 이름을 넣으면, 오류가 발생한다.

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

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

 

따라서 값과 타입은 같지 않다는 것을 명심하자. 값 f의 타입을 추론하기 위해 typeof를 사용한다.

type P = ReturnType<typeof f>; // type P = { x: number; y: number; }