如何使用打字稿收听对象更改?

RMPR

我有一个对象,我想听更改以执行一些操作,在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'.

终端输出:

tsc输出

我已经进行了一些研究,但无法找到问题所在。

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

完整的输出错误消息打字稿代理模块

和我的package.json

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

您的项目需要将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。)definePropertyset

(它也不会捕获其他更改,例如删除属性,更改原型等)。


旁注2:陷阱key参数setstring | Symbol,而不仅仅是string

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章