React Typescript useLocalStorage Hook

Question

我编写了一个自定义钩子来与 React 中的 sessionStorage 交互。目前我不喜欢我可以在那里任意写入任何键值对。出于测试和调试的目的，我想引入一种 TypeSafety 形式，并且我正在考虑使用联合类型而不是通用类型。

我基本上想实现两个目标。

1. 检查密钥是否是允许放入 sessionStorage 的有效密钥

2. 如果允许使用该键，请确保值的类型正确。

有谁知道如何在 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;

}

Answer 1

如果有人偶然发现这个问题，我最终发现了这是如何在 Typescript 中实现的。您可以通过在泛型上使用 typeof 运算符来达到所需的效果。基本上你首先定义一个接口或类型：type Allowed = {  item1: string  item2: boolean  item3: number}然后您可以使用 keyof 运算符修改该函数function useSessionStorage<T extends keyof Allowed>(key: T, initialValue: Allowed[T]){    {...}}