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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

React Typescript useLocalStorage Hook

React Typescript useLocalStorage Hook

UYOU 2023-11-12 14:49:00
我編寫(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;}
查看完整描述

1 回答

?
慕桂英4014372

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

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


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


type Allowed = {

? item1: string

? item2: boolean

? item3: number

}

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


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

? ? {...}

}


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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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