javascript - 有什么办法可以解决 Typescript 在某些范围内卡住对象而不是其他范围内的倾向吗？

Question

我有一个界面:

interface Model {
  pre: Vertices,
  post: Vertices,
  m: Matrix,
  viewport: Vector,
  halfViewport: Vector,
  mouse: MouseState,
  selection: boolean
}

我的应用程序中的状态对象是模型的一个实例，选择属性被初始化为 false。请注意，没有只读装饰器:

const state: Model = {
  ...
  selection : false
}

出于性能目的，模型值会就地更新，因为大多数属性都是引用类型。因此，代码中的一些位置将更新属性，其中一些嵌套在调用堆栈中。

现在，我注意到在顶级作用域的函数中，更新 Model 对象的选择属性是完全合法的:

函数绘制(状态){ 状态.选择 = !状态.选择 ...}

我实际上并没有在我的代码中进行此调用，但要注意在哪里我可以修改该选择属性，因为在堆栈的更深处，在 React 组件事件处理程序中，我'将尝试为选择分配一个值:

function app (S: Model) : DOMElement<HTMLAttributes, Element> {
  const props = {
    ...
    onMouseDown: function (e: MouseEvent) : void {
      ...
      S.selection = false
    }
  }
  return React.DOM.div(props)
}

但是该赋值会引发以下错误:

Uncaught TypeError: Cannot assign to read only property 'selection' of object '#<Object>'

起初，我仔细考虑了一下，检查了一下我没有在 Model 声明中写入 readonly，但我没有。当我查看 Chrome 调试器时，我发现 S 处的对象被卡住(例如，tsc 调用 `Object.freeze ' 在事物上。我相信这与 TS 中的过多属性检查有关，其中在分配给变量或参数时会检查接口(interface)实例是否存在此类情况，但无论如何都存在这种情况吗？我可以在一个范围内实现突变，这似乎非常不一致，但不是另一个。

Answer 1

I discover that the object at S is frozen (as in, tsc calls `Object.freeze' on things. I believe this is related to the excess property checking in TS wherein interface instances get checked for such when assign to variables or parameters, but is there anyway around this?

没有发生任何事情。 TypeScript 不会发出调用 Object.freeze 的代码。当然，您可以自己阅读发出的 JavaScript。除了删除类型注释并将 ES6+ 构造转换为等效的 ES5 代码之外，TypeScript 从不执行任何操作，其中都不包括对随机内容调用 freeze 。

有其他东西卡住了该对象。我怀疑您可能正在尝试在 React state 对象上设置属性，而不是正确调用 setState，但如果没有完整的示例，很难说。