[TypeScript] keyof와 typeof란 ?

타입스크립트를 공부하던중  typeof와 keyof 라는 키워드가 자주 보였다. 비슷한듯 다른듯 헷갈려 확실히 정리하기 위해 쓰는 글! 

 

1. keyof

- 객체 형태 타입에서 따로 속성들만을 뽑아 유니온 타입으로 만들어 주는 연산자이다.

interface Person {
		name: string;
}
interface Lifespan {
	birth:Date;
	death?:Date;
}

type k = keyof (Person | Lifespan); // type은 never

// k 를 풀어보면
-> (keyof Person) & (keyof Lifespan)
-> name & ( birth | death ) 
-> never

- 여기서 ( keyof Lifespan )을 주목해서 보면 속성들만 뽑은 후 유니온 으로 만들어준것을 볼 수 있다.

 

( 참고로 아래 등식도 기억해두면 좋을것같다!)

출처 : effective typescript

 

 

2. typeof

이 부분은 타입공간과 값 공간에서 심벌을 구분하는 파트를 읽어보면 더 좋다. 

 

- typeof는 타입의 관점과 값의 관점에서 봤을때 다른 값을 반환한다.

- 타입의 관점으로 보면 타입스크립트의 타입을 반환한다.

- 값의 관점으로 보면 자바스크립트의 런타임의 typeof 연산자를 반환한다.

 

interface Person {
  first: string;
  last: string;
}

const p: Person = { first: 'Jane', last: 'Jacobs' };

function email(p: Person, subject: string, body: string): Response {
  return new Response();
}

class Cylinder {
  radius=1;
  height=1;
}

// 타입의 관점
type T1 = typeof p ; // 타입은 Person
type T2 = typeof email; // 타입은 (p: Person, subject: string, body: string) => Response

// 값의 관점
const v1 = typeof p ; // 값은 'object'
const v2 = typeof email; // 값은 'function'

-  보통 자바스크립트에서 사용했던 , 즉 값의 관점에서 typeof 연산자는 익숙할 것 이다! (그게 나 ^^)

타입스크립트에서 타입의 공간에서는 typeof 연산자의 반환값이 다르다는것을 알아두자! 

 

 

참고자료

- effective typescript