JS 文件中的 TS 警告：“类型 X 上不存在属性 X”：是不是可以编写更干净的 JavaScript？

Posted 2023-02-22

【中文标题】JS 文件中的 TS 警告：“类型 X 上不存在属性 X”：是不是可以编写更干净的 JavaScript？

【英文标题】：TS warning in JS file: "Property X does not exist on type X": is it possible to write cleaner JavaScript?JS 文件中的 TS 警告：“类型 X 上不存在属性 X”：是否可以编写更干净的 JavaScript？

【发布时间】：2021-11-26 22:20:12

【问题描述】：

我目前正在发现 TypeScript。我使用以下代码：

const someClass = document.querySelector(".that-class");    
const someId = document.getElementById("elemId").value;

与我之前的许多其他人一样，当然还有更多人会遇到以下错误：

Property 'style' does not exist on type 'Element'.
Property 'value' does not exist on type 'htmlElement'.

我通过在需要时添加<HTMLElement> 或<HTMLInputElement> 在我的.ts 文件中修复了这些错误，工作正常。但是当我编译我的 .ts 时，我会从 .js 文件中的 VSCode 收到一些 TS 警告。

我的问题很简单：有没有办法避免在 JS 文件中也出现这些错误（即：是否有一种“更简洁”的方式来编写 javascript 代码）？还是应该直接忽略这些 TS 警告？

非常感谢您的帮助！

【问题讨论】：

这能回答你的问题吗？ How to use document.getElementById() method in TypeScript?

另见***.com/questions/33503077/…

嗨@depperm，感谢您的评论。我已经检查了这两个链接，但不幸的是它们并没有完全回答我的问题。我已经找到了如何修复 TS 文件中的错误（使用 fe const someId = (document.getElementById("someId"))!.value; 或 "as HTMLInputElement)。编译后，我收到打字稿警告不是来自 TS 文件，而是来自 JS 文件。我可以使用“ts-ignore”禁用警告，但我想知道是否有另一种方法来编写我的代码，这样我也不会在 JS 文件中收到任何警告?

这个答案是：***.com/a/65646512/707111

嗨@MarkHanna，非常感谢您的帮助！与 Ry 一样，我要感谢您的评论和研究，它们帮助我度过了难关。我找到了一个我在下面描述的修复：我的问题是元素类型上不存在 .value，所以我必须找到另一种方法来修复它。随意评论解决方案，也许你看到了我还看不到的东西

【参考方案1】：

这里有一些好消息：我找到了我正在寻找的答案。

给你一些额外的背景信息：我正在处理一个表单，需要使用 JavaScript/TypeScript 来操作一些用户输入。这是代码：

<form id="my-form" action="index.html" method="get" onsubmit="return showValue();">
    <input type="text" name="username">
    <input type="text" name="full-name">
    <input type="password" name="password">
    <button type="button" onclick="showValue();">Send</button>
</form>

还有我的 JavaScript 代码：

function showValue() 
    const myForm = document.getElementById("my-form").value;
    console.log(myForm);
    return 1;

哪个会返回警告："Property 'value' does not exist on type 'HTMLElement'。

这可以通过在 TypeScript 中添加此代码的一些变体来轻松解决：

const myForm = (<HTMLInputElement>document.getElementById("my-form")).value;

太好了，TypeScript 中不再有警告。但编译后生成的 JavaScript 文件会再次显示警告："Property 'X' does not exist on type X"

因此，我的问题是，如何编写代码才能完全不收到任何警告？

我希望找到如下答案：

function showValue() 
    const myForm = document.forms.my-form;
    console.log(myForm?.username.value);
    return 1;

我花了很长时间才找到它并在规范文档中进行了一些挖掘，但希望这似乎可行！

我仍然要感谢你们的 cmets，他们在我找到答案的过程中帮助了很多。

【讨论】：

听起来您在这里没有遇到过，但是通过一些 linting 设置，您可能会收到有关访问属性 using square bracket notation 的警告，而此时可以使用点表示法。我建议在这里添加的一件事是在您尝试访问其属性之前检查myForm（和您的输入）是否存在。根据您的设置，您或许可以使用 optional chaining 只需少量代码即可完成此操作。

感谢您的评论@MarkHanna（尤其是点符号：我认为与推荐的完全相反）。可选链接：如果我猜对了，“？”检查元素是否存在但不会阻止您，而“！”如果没有阻止你？

我还编辑了代码以整合您的建议 - 希望我做对了 ;)

对不起@Stebenwolf，我对你如何表达这个问题有点困惑。如果您使用可选链接，即?.，那么您尝试访问的属性不存在的对象 JavaScript 会将表达式解析为undefined，而不是引发错误。没有等效的!. 运算符，但有否定运算符! 和两个不等运算符!= 和!==。您可能会从 MDN 的 JS operators@

文档中找到所需的清晰度

@MarkHanna 我的错，我应该提供更多细节。我发现你可以使用“！”在打字稿中，编译后会消失，而“？”仍然在 JS 中。 f.e.我的 TypeScript 代码：const myForm = document.forms["my-form"]; console.log(myForm["username"]?.value); console.log(myForm["username"]!.value); 生成的 JS 是：console.log(myForm["username"]?.value); console.log(myForm["username"].value); 注意：我在这里保留了括号符号，当我写 document.forms.my-form 时 VSCode 会抛出错误：Property 'my' does not exist on type ...