typescript 리터럴 객체에 as const의 반복문 Object.entries

React Typescript 사용중에

SelectBox 같은 재사용 가능한 토글 메뉴 컴포넌트를 만들고 있는 와중에

 

export const orderSelectOptions = {
	orderSubject: '제목순',
	orderUpdated: '수정일순',
	orderCreated: '생성일순',
} as const;

 

이런식으로 리터럴 객체에 as const를 이용하여 상수로 만들었다.

 

- 해당 리터럴 객체의 추론

const orderSelectOptions: {
    readonly orderSubject: "제목순";
    readonly orderUpdated: "수정일순";
    readonly orderCreated: "생성일순";
}

 

{Object.entries(orderSelectOptions).map(([key, value]) => (
    <div
        key={key}
        className={cn(styles.select_item, {
            [styles.active]: isSelected === key,
        })}
        onClick={() => handleChageSelected(key)}
    >
        {value}
        {isSelected === key && (
            <div className={styles.icon_container}>
                <AiOutlineCheck size={14} color="#e5855d" />
            </div>
        )}
    </div>
))}

 

그리고 리터럴 객체를 Object.entries를 이용해서 토글 아이템 <div>를 여러개 만드는 코드인데

 

리터럴 객체의 key값은 string이다. 

 

그래서 *handleChangeSelected* 함수의 파라미터로 아무 string이나 다 올 수 있게 된다.

 

무언가 마음에 안든다.

 

그래서 해당 orderSelectOptions as const 리터럴 객체의 key값을 가져오는 *orderSelectOptionsKeys*를 만들고

export type orderSelectOptionsKeys = keyof typeof orderSelectOptions

 

{Object.entries(orderSelectOptions).map(([key, value]) => (
    <div
        key={key}
        className={cn(styles.select_item, {
            [styles.active]: isSelected === key,
        })}
        onClick={() =>
            handleChangeSelected(key as orderSelectOptionsKeys)
        }
    >
        {value}
        {isSelected === key && (
            <div className={styles.icon_container}>
                <AiOutlineCheck size={14} color="#e5855d" />
            </div>
        )}
    </div>
))}

 

해당 key값만 올 수 있게 해주었다.