[Next.js+TypeScript]lodashでリファクタリングしたら綺麗になったtips

以下は自分で、フロントコードを描いてて、こうやればいいのかと思った場所を記述するメモです。

画面遷移時にtoastでメッセージを表示したい。

以下のオブジェクトからtextを取得したい。

const MESSAGE_TYPES = {
  success: {
    text: '成功しました。',
  },
}

自分で描いた方法

outer.query.messageにはsuccessが入ってる
だが、
MESSAGE_TYPES[status]で型エラーが出てしまう。
なので、//@ts-ignoreでTypescirptのエラーを凌いだ。

const status = router.query.message
// @ts-ignore
const { text } = MESSAGE_TYPES[status]

改善

import _ from 'lodash'
// asで強制型変換
const status = router.query.message as string

//lodash、_.getで取得する
const { text } = _.get(MESSAGE_TYPES, status)

全体コード

//画面遷移時にquery.messageなかったらreturn
if (!_.has(router, 'query.message')) return

//qurry.messageの中身があったら表示
const status = router.query.message as string
const { text } = _.get(MESSAGE_TYPES, status)
toast.notify(text, {
      duration: 5,
      type: status,
    })
}, [router])

toastは以下を使用した。