문제 상황

아래와 같이 category가 있는 경우에만 한국어로 category가 보이게 하려고 했는데, 문제가 생겼다.

const router = useRouter()
const { keyword, category, subCategory } = router.query 

const mainCategories = {
    APPLE: '사과',
    BANANA: '바나나',
    KIWI: '키위',
    MANGO: '망고',
  }

const categoryText = () => {
   return mainCategories[category]
}                        ^^^^^^^^

1. Type ‘string’ is not assignable to type ‘categoryType’
2. Type ‘undefined’ is not assignable to type ‘categoryType’

객체의 key값을 이용하여 value에 접근하려 할 때 이와 같은 이슈가 잘 생긴다.
왜냐하면 객체의 key값이 undefined가 될 여지가 있기 때문이다(쿼리를 사용하니까)

해결

interface categoryType {
  keyword?: string
  category?: 'DISPLAY' | 'PERFORMANCE' | 'CONTENTS' | 'TARGETING'
  subCategory?: 'BANNER' | 'CPM' | 'CPA' | 'CPC' | 'CPV' | 'CPI' | 'LIVE_COMMERCE' | 'NATIVE' | 'PUSH' | 'SMS'
}
  
const router = useRouter()
const { keyword, category, subCategory }: categoryType = router.query 

const mainCategories = {
    APPLE: '사과',
    BANANA: '바나나',
    KIWI: '키위',
    MANGO: '망고',
  }

const categoryText = () => {
    if (category) {
        return mainCategories[category]
      }                       
}

undefined의 경우를 없애기 위해 interface를 추가했다. 그래서 해당 key가 있을때만 인식하도록 만들었다.
그리고 object에 접근하는 부분에서도 조건부를 걸어, 해당 key가 있을때에만 값을 return 하도록 했다.

other tips

1

const categoryText = () => {
    if (category) {
        return mainCategories[category ?? ""]
      }                       
}

위와 같이 category가 없을 때 뭘 넣어줄 지 작성해도 된다.

2

const categoryText = () => {
    if (category) {
        return mainCategories[category as string]
      }                       
}

이런 식으로 아예 category가 어떤게 들어올 지 지정해줘도 된다.

참고

• 철진님 via slack
• typescript에서 undefined value 처리하기