How to generate getters and setters in Javascript?-CodePudding

I have the following code, which is very repetitious:

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");
    }
  }
}

As you can see, the get and set for each flag type is identical, save for the property names. I would like to do something like this instead:

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")
}

But I'm not sure if Javascript / Typescript has support for this sort of thing. Is such a thing possible, and if so, how? If not, is there any other way I can cut down on the repetition here?

CodePudding user response：

You can use a proxy with get and set traps, use TS types to allow only props you wish to handle (TS playground):

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);

CodePudding user response：

All you really need is to use Object.defineProperty with an object with a get and set properties. Or, with multiple properties, use Object.defineProperties to define them all at once.

One approach which will help with code organization is to not use lots of local storage keys, but instead use a single object that gets stored.

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>;

CodePudding user response：

This is the current "best" solution I can come up with. Open to anyone who can provide an improvement over this:

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); }
}