React Typescript использует хук LocalStorage

я написал собственный хук для взаимодействия с sessionStorage в React. В настоящее время мне не нравится, что я могу просто произвольно написать туда любую пару ключ-значение. В целях тестирования и отладки я хотел бы представить форму TypeSafety, и я думал о том, чтобы, возможно, использовать Union Type, а не Generic.

Я в основном хочу достичь двух целей.

  1. проверьте, является ли ключ действительным ключом, который разрешено помещать в sessionStorage
  2. если ключ разрешен, убедитесь, что тип значения правильный.

Кто-нибудь знает, как вы будете реализовывать такие проверки в 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.info(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;
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
406
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

На случай, если кто-то наткнется на этот вопрос, я нашел, как это реализовано в Typescript. Вы можете добиться желаемого эффекта, используя оператор typeof в дженерике.

в основном вы сначала определяете интерфейс или тип:

type Allowed = {
  item1: string
  item2: boolean
  item3: number
}

Затем вы можете изменить функцию с помощью оператора keyof

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

использование ключа лучше описано здесь: https://www.typescriptlang.org/docs/handbook/advanced-types.html.

Надеюсь, это поможет другим людям, которые могут бороться с этим.

Другие вопросы по теме