为了账号安全,请及时绑定邮箱和手机立即绑定

React Typescript useLocalStorage Hook

React Typescript useLocalStorage Hook

UYOU 2023-11-12 14:49:00
我编写了一个自定义钩子来与 React 中的 sessionStorage 交互。目前我不喜欢我可以在那里任意写入任何键值对。出于测试和调试的目的,我想引入一种 TypeSafety 形式,并且我正在考虑使用联合类型而不是通用类型。我基本上想实现两个目标。检查密钥是否是允许放入 sessionStorage 的有效密钥如果允许使用该键,请确保值的类型正确。有谁知道如何在 Typescript 中实现此类检查。任何帮助表示赞赏。export function useSessionStorage<T>(key: string, initialValue: T) {  const [storedValue, setStoredValue] = useState<T>(() => {    try {      const item = window.sessionStorage.getItem(key);// Parse stored json or if none return initialValue      return item ? JSON.parse(item) : initialValue;    } catch (error) {      console.log(error);      return initialValue;    }  });  const setValue = (value: T | ((val: T) => T)) => {    try {      const valueToStore =        value instanceof Function ? value(storedValue) : value;      setStoredValue(valueToStore);      window.sessionStorage.setItem(key, JSON.stringify(valueToStore));    } catch (error) {      console.error(error);    }  };  return [storedValue, setValue] as const;}
查看完整描述

1 回答

?
慕桂英4014372

TA贡献1871条经验 获得超13个赞

如果有人偶然发现这个问题,我最终发现了这是如何在 Typescript 中实现的。您可以通过在泛型上使用 typeof 运算符来达到所需的效果。


基本上你首先定义一个接口或类型:


type Allowed = {

  item1: string

  item2: boolean

  item3: number

}

然后您可以使用 keyof 运算符修改该函数


function useSessionStorage<T extends keyof Allowed>(key: T, initialValue: Allowed[T]){

    {...}

}


查看完整回答
反对 回复 2023-11-12
  • 1 回答
  • 0 关注
  • 51 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信