Tengo el siguiente código, que es muy repetitivo:
const flags = { get logged() { return localStorage.getItem("logged") === "true"; }, set logged(val: boolean) { if (val) { localStorage.setItem("logged", "true"); } else { localStorage.removeItem("logged"); } }, get notificationsMuted() { return localStorage.getItem("notifications-muted") === "true"; }, set notificationsMuted(val: boolean) { if (val) { localStorage.setItem("notifications-muted", "true"); } else { localStorage.removeItem("notifications-muted"); } } } Como puede ver, get y set para cada tipo de indicador es idéntico, excepto por los nombres de las propiedades. Me gustaría hacer algo como esto en su lugar:
function getter(prop: string) { return localStorage.getItem(prop) === "true"; } function setter(prop: string, val: boolean) { if (val) { localStorage.setItem(prop, "true"); } else { localStorage.removeItem(prop); } } const flags = { get logged: getter("logged") set logged: setter("logged") get notificationsMuted: getter("notifications-muted") set notificationsMuted: setter("notifications-muted") }Pero no estoy seguro de si Javascript/Typescript tiene soporte para este tipo de cosas. ¿Es tal cosa posible, y si es así, cómo? Si no, ¿hay alguna otra forma en que pueda reducir la repetición aquí?
Puede usar un proxy con trampas get y set , use tipos TS para permitir solo los accesorios que desea manejar (área de juegos TS ):
interface Flags { logged: boolean, 'notifications-muted': boolean; } type Prop = keyof Flags; const handlers = { get(_: Flags, prop: Prop) { return localStorage.getItem(prop) === "true"; }, set(_: Flags, prop: Prop, val: any) { if (val) { localStorage.setItem(prop, "true"); } else { localStorage.removeItem(prop); } return true; } }; const flags = new Proxy<Flags>({} as Flags, handlers);Todo lo que realmente necesita es usar Object.defineProperty con un objeto con propiedades get y set . O, con varias propiedades, use Object.defineProperties para definirlas todas a la vez.
Un enfoque que ayudará con la organización del código es no usar muchas claves de almacenamiento local, sino usar un solo objeto que se almacene.
const props = ['logged', 'notificationsMuted'] as const; const defaultStorage = Object.fromEntries(props.map(prop => [prop, false])); const getStorage = () => JSON.parse(localStorage.getItem('settings') || JSON.stringify(defaultStorage)); const flags = Object.defineProperties( {}, Object.fromEntries( props.map( prop => [ prop, { get: () => getStorage()[prop], set: (newVal: boolean) => { const store = getStorage(); store.prop = newVal; localStorage.setItem('settings', JSON.stringify(store)); } } ] ) ) ) as Record<(typeof props)[number], boolean>;Esta es la "mejor" solución actual que se me ocurre. Abierto a cualquiera que pueda aportar una mejora sobre esto:
function getter(prop: string): boolean { return localStorage.getItem(prop) === "true"; } function setter(prop: string, val: boolean): void { if (val) { localStorage.setItem(prop, "true"); } else { localStorage.removeItem(prop); } } const flags = { get logged() { return getter("logged") }, set logged(val: boolean) { setter("logged", val) }, get notificationsMuted() { return getter("notifications-muted"); }, set notificationsMuted(val: boolean) { setter("notifications-muted", val); } }