React Typescript useLocalStorage Hook

Question

我编写了一个自定义钩子来与 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;}

Answer 1

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

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

type Allowed = {

  item1: string

  item2: boolean

  item3: number

}

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

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

    {...}

}