[Typescript] typeof, keyof 연산자와 typeof keyof 설명

들어가며

`typeof` 연산자와 `keyof` 연산자, `keyof typeof` 에 대해 알아보고 다음편에 `keyof` 연산자를 활용할 수 있는 유용한 맵드 타입에 대해 알아보겠습니다.

 

---

typeof

TypeScript 공식문서

JavaScript에서는 이미 표현식 컨텍스트에서 사용할 수 있는 `typeof` 연산자가 있습니다.TypeScript는 타입 컨텍스트에서 변수나 프로퍼티의 타입을 추론할 수 있는 typeof 연산자를 추가합니다.

 

간단하게 정리하면, `typeof` 연산자는 type을 반환합니다.

다음 예시에서, 객체 a의 형태에 따라 type이 선언되는 것을 어렵지 않게 확인 가능합니다.

const a = {
  a: 1,
  b: true
}

type check = typeof a
// 결과 (Hover)
type check = {
    a: number;
    b: boolean;
}

 

`typeof` 연산자의 특징으로는 자바스크립트로 선언된 변수 혹은 프로퍼티의 Type을 반환한다는 것입니다.

 

다음은, `keyof` 연산자에 대해 알아봅시다.

 

---

keyof

TypeSricpt 공식문서

keyof 연산자는 객체 타입에서 객체의 키 값들을 숫자나 문자열 리터럴 유니언을 생성합니다. 

객체의 키 값들을 숫자나 문자열 리터럴 유니언으로 생성한다는 것이라..

머리로는 이해가 되나 마음으로는 이해가 되지 않습니다.

 

다음 예시를 보고 이해해봅시다.

기존에 정의된 `Color` Type을 Key값들로 이루어진 새로운 type을 생성하고 있는 예시입니다.

type Color = {
    red: string;
    yellow: string;
    isDrawing: boolean;
}

type check = keyof Fruit;
// 결과 (Hover)
type keys = "red" | "yellow" | "isDrawing"

 

결국, keyof 연산자는 type에 적용하는 문법인 것입니다.

 

정리하면

typeof는 자바스크립트 변수 → Key로 이루어진 Type

keyof는 Key로 이루어진 Type → Key로 이루어진 유니언

연결고리가 보이시나요? 아래 그림을 보시면 이해가 되실겁니다.

(주의할 점으로, keyof와 typeof 연산자는 접두사 이므로, 뒤에 오는 연산자가 먼저 실행됩니다)

keyof typeof 

결국 `keyof typeof` 는 자바스크립트 객체로 선언된 변수의 Key 값들로 이루어진 Type을 선언할때 사용됩니다.

 

개인적인 견해로는 변수를 선언할때는 `type`을 지정해주는 경우가 대부분입니다. 따라서, 특정 `type`의 key들로 이루어진 유니언이 필요하면, `keyof` 연산자만을 사용하면 됩니다. 다만, 간혹 `type`을 지정하지 않은 객체의 key들로 이루어진 유니언을 일시적으로 사용하고 싶을때 `keyof typeof` 를 사용하면 될것 같습니다.

 

---

 

이상, `typeof` `keyof`연산자와 `keyof typeof` 에  대해 배워보았습니다.

해당 포스트에서 틀린 내용이 있으면 댓글로 알려주시면 감사하겠습니다 :)