[TIL] React - keyof 사용하여 type 선언하기

✔️ 이슈 상황

만들어진 체크박스 컴포넌트에서 체크박스의 색깔을 커스텀할 수 있도록 고쳐야했는데, 아무 색깔이나 props 로 받으면 안되고 미리 정의된 color.ts 파일에 있는 디자인 시스템 색상 중에서만 사용가능하도록 해야했다.

keyof 사용하기

Keyof Type Operator

keyof 는 타입 연산자로, 공식문서 설명에는 다음과 같이 나와있다.

keyof 연산자는 객체 타입에서 객체의 키 값들을 숫자나 문자열 리터럴 유니언을 생성합니다. 아래 타입 P는 “x” | “y”와 동일한 타입입니다.

type Point = { x: number; y: number };
type P = keyof Point;

keyof 의 역할은 object 의 가능한 union type 의 키 값들을 받아오는 것이다.

따라서 정해진 type 만 받아올수 있도록 하기 위해서 다음과 같은 구문을 기존 코드에 추가해준다.

import SystemColor from 'src/styles/color';

export interface CheckboxProps{
...
color?: keyof typeof SystemColor; // color prop 추가
}