React Typescript useLocalStorage 钩子

Question

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

我主要想实现两个目标。

检查密钥是否是允许放入 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;
}

Answer 1

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

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

type Allowed = {
  item1: string
  item2: boolean
  item3: number
}

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

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

此处更好地描述了密钥的使用：https://www.typescriptlang.org/docs/handbook/advanced-types.html。

希望这可以帮助其他可能正在为此苦苦挣扎的人。

React Typescript useLocalStorage 钩子

React Typescript useLocalStorage Hook

javascript

typescript

ecmascript-6

reactjs

ecmascript-2016