LocalStorage を型安全に扱う Tips

概要

ローカルストレージ扱うことになった時、愚直に書くといまいち型安全に扱えないので、解決した tips です。

コード（結論）

localstorage に保存しているデータをData型で表現しています。
（React で書いてたので、カスタムフックの命名になってます）

type Data = {
    hoge: {
        a: string
    },
    fuga: {
        b: number
    },
    piyo: {
        c: boolean
    },
}

type DataKey = keyof Data

export const useLocalStorage = <Key extends DataKey>(key: Key) => {

    return {
        getValue: (): Data[Key] | null => {
            const value = localStorage.getItem(key)
            if (!value) {
                return null
            }

            return JSON.parse(value)
        },
        setValue: (data: Data[Key]) =>
	  localStorage.setItem(key, JSON.stringify(data))
    }
}

ちゃんと型が補完される

まとめ

Generics で型渡すのもなんだかな～と思っていたので、良い感じにできて満足でした。
あとは、どんなデータが入っているかが型を見ればわかるので、労力の割に便利なのかなと思います。