Object key를 Type으로 만들기

📌 typeof

객체 데이터를 객체 타입으로 변환해주는 연산자이다.

객체에 쓰인 타입 구조를 독립된 타입으로 사용하고자 한다면 객체 앞에 typeof키워드를 붙여 명시해주면 된다.

const obj = {
   red: 'apple',
   yellow: 'banana',
   green: 'cucumber',
};

// 위의 객체를 타입으로 변환하여 사용하고 싶을 때
type Fruit = typeof obj;
/*
type Fruit = {
    red: string;
    yellow: string;
    green: string;
}
*/

📌 keyof

객체 형태의 타입에서 속성들만 추출하여 유니온 타입으로 만들어주는 연산자이다.

type Type = {
   name: string;
   age: number;
   married: boolean;
}

// 위의 객체 타입에서 키 값만 추출하여 타입으로 사용하고 싶을 때
type Union = keyof Type;
// type Union = name | age | married

만약 obj 객체의 키값인 red, yellow, green을 상수 타입으로 사용하고 싶을 때는 typeof obj자체에 keyof 키워드를 붙여주면 된다.

// 상수 타입을 구성하기 위해서는 타입 단언을 해준다.
const obj = { red: 'apple', yellow: 'banana', green: 'cucumber' } as const; 

// 객체의 key들만 가져와 상수 타입으로 가져오기
type Color = keyof typeof obj;

 

[참고 사이트]

https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-keyof-typeof-%EC%82%AC%EC%9A%A9%EB%B2%95

📘 객체를 타입으로 변환 - keyof / typeof 사용법