я написал собственный хук для взаимодействия с sessionStorage в React. В настоящее время мне не нравится, что я могу просто произвольно написать туда любую пару ключ-значение. В целях тестирования и отладки я хотел бы представить форму TypeSafety, и я думал о том, чтобы, возможно, использовать Union Type, а не Generic.
Я в основном хочу достичь двух целей.
Кто-нибудь знает, как вы будете реализовывать такие проверки в 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;
}
На случай, если кто-то наткнется на этот вопрос, я нашел, как это реализовано в 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.
Надеюсь, это поможет другим людям, которые могут бороться с этим.