如何在 Javascript 中生成 getter 和 setter？

Question

我有以下代码，非常重复：

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

如您所见，每个标志类型的 get 和 set 是相同的，除了属性名称。我想做这样的事情：

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

但我不确定 Javascript / Typescript 是否支持此类功能。这样的事情可能吗？如果可能的话，怎么办？如果没有，有没有其他方法可以减少这里的重复？

Answer 1

您真正需要的是对具有 get 和 set 属性的对象使用 Object.defineProperty。或者，对于多个属性，使用 Object.defineProperties 一次定义它们。

一种有助于代码组织的方法是不使用大量本地存储键，而是使用一个存储的对象。

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

Answer 2

这是目前我能想到的“最佳”解决方案。向任何可以提供改进的人开放：

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

Answer 3

您可以使用 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);

如何在 Javascript 中生成 getter 和 setter？

How to generate getters and setters in Javascript?

javascript

getter-setter

local-storage

typescript