TS 2540：无法分配给样式，因为它是只读属性

Posted 2023-03-13

【中文标题】TS 2540：无法分配给样式，因为它是只读属性

【英文标题】：TS 2540: Cannot assign to style because it is a read-only property

【发布时间】：2021-01-22 08:46:37

【问题描述】：

我在 TSX 标记中创建了一个 textarea 元素，而 TS typechecker in Vim 抱怨 2540: Cannot assign to style because it is a read-only property。将 textarea.style 设为只读有点奇怪，因为它可以写入...

如何使错误消息消失？我应该将代码中的input 变量转换为其他变量吗？

【问题讨论】：

我什至不知道这是否有效。我只在样式图中分配了属性。所以在这里可以使用例如Object.assign(input.style, whiteSpace: 'pre', position: 'absolute', left: '-9999px' )

@H.B.当然，这是一种方式。不过有点常见。显然不推荐使用字符串（根据 MDN）：developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/…

【参考方案1】：

我解决了这个问题：

input.setAttribute('style', 'white-space: pre; position: absolute; left: -9999px;');

显然“TypeScript 在 Element 上没有样式属性。”正如related *** answer 中提到的那样。

【参考方案2】：

显然，我已经有了答案……

说输入变量是使它工作的特定类型。

const input: htmlTextAreaElement = document.createElement('textarea')                                                                                                   
const currentTarget = e.currentTarget as HTMLDivElement    

这可能是因为createElementcan create all kinds of elements 和 Typescript 无法知道哪个，因为它是基于输入字符串的。所以你需要说出它返回的是什么。

【讨论】：

实际上，TypeScript 类型声明（此处为lib.dom.d.ts）具有重载，因此createElement 应该已经返回正确的类型。这不太可能是querySelector，它不一定只是一个标签名称。 （所以document.querySelector('a') 给你输入HTMLAnchorElement 但document.querySelector('a[href]') 只给你Element。）这里的问题是currentTarget，它不能自动输入。

> 这里的问题是currentTarget，不能自动输入。当然，这是一个问题，但这与所讨论的错误无关。 input 的隐式类型不可能是正确的，因为指定类型会使 TS2540 错误消失。如果 TS 认为它已经是 HTMLTextAreaElement ，那么指定它就是一个空操作。

这就是我的意思，it absolutely is a no-op。

此外，将字符串分配给style 应该总是给您一个错误，因为该属性被键入为只读。因此，您不应该得到错误的唯一方法是如果您以某种方式丢失了类型信息，例如断言any.

@H.B. TS 编译器从不抱怨，但 linter 不知何故做到了，而且添加类型不是空操作，......不知道差异是由什么引起的。