如何在 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

您可以将 代理 与 获取 和 设置 陷阱，使用 TS 类型只允许您想要处理的 props (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);

Answer 2

您真正需要的只是将 Object.defineProperty 与具有 get 和 set 属性的对象一起使用。或者，对于多个属性，使用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 3

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

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