如何使用打字稿来监听对象更改？

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

但是linter向我显示了这个错误信息

[ts] Cannot find name 'Proxy'.

终端输出：

我做了一些研究，我无法找到错误。

正如所建议的那样，我将模块参数更改为ES6而不是commonjs，没有任何反应。完整输出如下

和我的package.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。