我編寫(xiě)了一個(gè)自定義鉤子來(lái)與 React 中的 sessionStorage 交互。目前我不喜歡我可以在那里任意寫(xiě)入任何鍵值對(duì)。出于測(cè)試和調(diào)試的目的,我想引入一種 TypeSafety 形式,并且我正在考慮使用聯(lián)合類型而不是通用類型。我基本上想實(shí)現(xiàn)兩個(gè)目標(biāo)。檢查密鑰是否是允許放入 sessionStorage 的有效密鑰如果允許使用該鍵,請(qǐng)確保值的類型正確。有誰(shuí)知道如何在 Typescript 中實(shí)現(xiàn)此類檢查。任何幫助表示贊賞。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;}
React Typescript useLocalStorage Hook
UYOU
2023-11-12 14:49:00