第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

React Typescript useLocalStorage Hook

React Typescript useLocalStorage Hook

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

1 回答

?
慕桂英4014372

TA貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超13個贊

如果有人偶然發(fā)現(xiàn)這個問題,我最終發(fā)現(xiàn)了這是如何在 Typescript 中實(shí)現(xiàn)的。您可以通過在泛型上使用 typeof 運(yùn)算符來達(dá)到所需的效果。


基本上你首先定義一個接口或類型:


type Allowed = {

? item1: string

? item2: boolean

? item3: number

}

然后您可以使用 keyof 運(yùn)算符修改該函數(shù)


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

? ? {...}

}


查看完整回答
反對 回復(fù) 2023-11-12
  • 1 回答
  • 0 關(guān)注
  • 157 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號