亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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 關注
  • 143 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號