keyof, typeof, valueof

Tags
type
부가 설명
- keyof : 오브젝트의 키만 추출해서 유니온 타입으로 만듦 - typeof : 데이터의 타입정보만 가져옴 - ValueOf 라는 커스텀 타입을 만들어서 사용
비고
Keyof Type OperatorTypeof Type OperatorValueOf 만들기ValueOf 타입 선언테스트

Keyof Type Operator

https://www.typescriptlang.org/docs/handbook/2/keyof-types.html
오브젝트의 키들로 새로운 유니온 타입을 만들 수 있다.
type Point = { x: number; y: number };

type P = keyof Point;
// type P = 'x' | 'y';

Typeof Type Operator

https://www.typescriptlang.org/docs/handbook/2/typeof-types.html
타입을 가져옴.
type s = typeof "Hello world";
// type s = string
function f() {
  return { x: 10, y: 3 };
}
type P = ReturnType<typeof f>;
//   type P = {
//       x: number;
//       y: number;
//   }
 

ValueOf 만들기

ValueOf 타입 선언

export type ValueOf<T> = T[keyof T];

테스트

type TEST = {
  hi: 1;
  hello: 2;
  bye: 3;
};

type Values = ValueOf<TEST>;
notion image
TEST 오브젝트 타입에서 Values만 추출해서 새로운 타입을 만들었다. 성공!
 
타입 원리를 좀 더 이해하기 쉽게 풀어쓰면 아래와 같다.
// 👇️ const obj: {readonly name: "Tom"; readonly country: "Chile";}
const obj = {
  name: 'Tom',
  country: 'Chile',
} as const;

// 👇️ type UKeys = "name" | "country"
type UKeys = keyof typeof obj;

// 👇️ type UValues = "Tom" | "Chile"
type UValues = typeof obj[keyof typeof obj];
type UValues2 = typeof obj[UKeys];