错误：类型 HTMLElement 上不存在属性“选择”

Posted 2023-03-13

【中文标题】错误：类型 HTMLElement 上不存在属性“选择”

【英文标题】：error:Property 'select' does not exist on type HTMLElement

【发布时间】：2018-09-29 09:27:47

【问题描述】：

 function copy()
        var Url=document.getElementById("Id");
        Url.select(); //error
        document.execCommand("Copy"); // browser copy
        

如上。我正在尝试创建一个在浏览器中复制文本的功能。但是出现标题错误 在打字稿中。 我认为 select() 是有效的（link），因为我在演示中使用它时可以正确复制。 我的ts版本是2.8.1

【问题讨论】：

您尝试从中选择文本的元素是什么类型的元素

select 不是htmlElement 方法，它是Events API 的一部分

它是一个输入元素。但即使 vscode 抱怨错误，它也正确复制。 复制文字

是的，我也认为 select 不是 HTMLElement 方法。但是为什么选择有效

【参考方案1】：

你需要添加一个type assertion：

var Url = document.getElementById("Id") as HTMLInputElement;
Url.select(); // OK

原因

getElementById 可以返回任何HTMLElements。在您的情况下，您知道它是一个输入 元素，因此您可以通过使用类型断言 ? 告诉 TypeScript。

【讨论】：

太棒了，所以即使我检查了 copyText 上没有选择方法，为什么演示也能正常工作。该方法是否退出了它的原型链？

是的，我明白了。 HTMLInputElement 有选择方法。谢谢

类似的问题我试图用 进行类型转换，但它抛出了另一个错误并遇到了这篇文章....救命稻草！！！

【参考方案2】：

select 方法是为HTMLInputElements 定义的。以下将摆脱 TypeScript 错误。

let Url: HTMLInputElement = document.getElementById("Id") as HTMLInputElement;
Url.select();
document.execCommand("Copy");

【讨论】：

感谢您的支持。如果您查看已接受的答案编辑链接，则该链接已从此答案中复制。所以这是第一个正确答案！！

【参考方案3】：

你需要指定元素的正确类型，因为 React 认为它只是一个 HTMLElement 而不是 HTMLInputElement。

所以，换成它！

var Url=document.getElementById("Id") as HTMLInputElement;