Как я могу прослушать изменения объекта, используя машинопись?

Question

У меня есть объект, и я хочу прослушать изменения, чтобы выполнить некоторые действия. В ES6 я бы сделал что-то подобное:

let members = {};
let targetProxy = new Proxy(members, {
    set: function (members, key, value) {
        console.log(key + " set to " + value);
        members[key] = value;
        return true;
    }
});

Конвертировано в машинопись

const members = {};
let targetProxy: any = new Proxy(members, {
    set: function (members: any, key: string, value: string) {
        console.log(`${key} set to ${value}`);
        members[key] = value;
        return true;
    }
});

Но ЛИНТЕР показывает мне это сообщение об ошибке

[ts] Cannot find name 'Proxy'.

Выход терминала:

Я провел несколько исследований, и мне не удалось найти, что случилось.

Как и предполагалось, я изменил свой параметр модуля на ES6 вместо commonjs, ничего не происходит. Полный вывод ниже

и мой пакет. Json

{
  "compilerOptions": {
    "module": "ES6",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*"]
    }
  },
  "include": [
    "src/**/*"
  ]
}

Answer 1

В вашем проекте должны быть установлены параметры компилятора TypeScript для ES2015 или новее ( docs ).Параметром командной строки будет --target "ES2015" (или "ES2016" и т. Д., Или "ESNext" для нацеливания на последние предложенные функции).

---

Примечание: set фиксирует значения свойств настройкиобычным способом, но не через Object.defineProperty:

const members = {};
let targetProxy = new Proxy(members, {
    set: function(members, key, value) {
        console.log(`${key} set to ${value}`);
        members[key] = value;
        return true;
    }
});
console.log("---- Notice no set trap fired:");
console.log(`targetProxy.foo: ${targetProxy.foo}`);
Object.defineProperty(targetProxy, "foo", {
  value: 1,
  writable: true,
  configurable: true,
  enumerable: true
});
console.log(`targetProxy.foo: ${targetProxy.foo}`);
Object.defineProperty(targetProxy, "foo", {
  value: 2,
  writable: true,
  configurable: true,
  enumerable: true
});
console.log(`targetProxy.foo: ${targetProxy.foo}`);
console.log("---- But it's fired for simple assignment:");
console.log(`targetProxy.bar: ${targetProxy.bar}`);
targetProxy.bar = 1;
console.log(`targetProxy.bar: ${targetProxy.bar}`);
targetProxy.bar = 2;
console.log(`targetProxy.bar: ${targetProxy.bar}`);

.as-console-wrapper {
  max-height: 100% !important;
}

Для этого вам также понадобится ловушка defineProperty.(Обратите внимание, что и set, и defineProperty будут срабатывать при установке свойства данных, предполагая, что set позволяет операции продолжаться.)

(Он также не фиксирует другие изменения, такие как удалениесвойства, изменение прототипа и т. д.)

---

Примечание 2: параметр key для ловушки set равен string | Symbol, а не просто string.