들어가며
`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` 에 대해 배워보았습니다.
해당 포스트에서 틀린 내용이 있으면 댓글로 알려주시면 감사하겠습니다 :)
'웹 프로그래밍 > TypeScript' 카테고리의 다른 글
| [우아한 타입스크립트] 1장 웹 개발의 역사 및 타입스크립트의 등장 (1) | 2024.08.06 |
|---|