|
|
相关文章推荐
|
讲道义的柳树 · 用ASP.Net实现文件的在线压缩和解压缩 ...· 1 年前 · |
|
|
俊秀的葫芦 · Why can't .Net ...· 1 年前 · |
|
|
逼格高的西瓜 · 基于深度残差收缩网络的电力系统暂态频率安全集 ...· 1 年前 · |
|
|
英俊的硬币 · thrift源码解析——深度学习模型的服务器 ...· 1 年前 · |
我正在玩typescript，并试图创建一个脚本，当文本输入到输入框中时，该脚本将更新p元素。
html如下所示：
<html>
</head>
<p id="greet"></p>
<input id="name" type="text" name="name" value="" onkeyup="greet('name')" />
</form>
</body>
<script src="greeter.js"></script>
</html>
和
greeter.ts
文件：
function greeter(person)
return "Hello, " + person;
function greet(elementId)
var inputValue = document.getElementById(elementId).value;
if (inputValue.trim() == "")
inputValue = "World";
document.getElementById("greet").innerText = greeter(inputValue);
}
当我用
tsc
编译时，我得到了下面的“错误”：
/home/bjarkef/sandbox/greeter.ts(8,53): The property 'value' does not exist on value of type 'HTMLElement'
然而，编译器会输出一个javascript文件，这在chrome中工作得很好。
我是怎么得到这个错误的？我该如何修复它呢？
另外，根据typescript，我可以在哪里查找
'HTMLElement'
上的哪些属性是有效的？
请注意，我是javascript和typescript的新手，所以我可能遗漏了一些明显的东西。:)
15 个回答
高票数
最新
Tomasz Nurkiewicz
修改于2012-10-20 23:39
得票数
19
问题出在这里：
document.getElementById(elementId).value
您知道，从
getElementById()
返回的
HTMLElement
实际上是从它继承的
HTMLInputElement
的一个实例，因为您传递的是输入元素的ID。类似地，在静态类型的Java中，这不会被编译：
public Object foo() {
return 42;
foo().signum();
signum()
是
Integer
的一种方法，但是编译器只知道
foo()
的静态类型，即
Object
。而且
Object
没有
signum()
方法。
但编译器无法知道这一点，它只能基于静态类型，而不能基于代码的动态行为。据编译器所知，
document.getElementById(elementId)
表达式的类型没有
value
属性。只有输入元素才有值。
有关参考信息，请查看MDN中的
HTMLElement
和
HTMLInputElement
。我猜Typescript或多或少与这些是一致的。
inDream
回答于2012-10-20 23:46
得票数
22
解决这个问题的一种快速方法是使用选择属性。
function greet(elementId) {
var inputValue = document.getElementById(elementId)["value"];
if(inputValue.trim() == "") {
inputValue = "World";
document.getElementById("greet").innerText = greeter(inputValue);
}我只是尝试了几种方法，找到了这个解决方案，
我不知道你的原始脚本背后有什么问题。
作为参考，你可以参考Tomasz Nurkiewicz的帖子。
woodysan
回答于2012-10-20 23:54
得票数
44
尝试将要更新的元素强制转换为HTMLInputElement。正如在其他答案中所述，您需要提示编译器这是一种特定类型的HTMLElement：
var inputElement = <HTMLInputElement>document.getElementById('greet');
inputElement.value = greeter(inputValue);
Community
修改于2017-05-23 20:34
得票数
568
根据Tomasz Nurkiewiczs的回答，“问题”是typescript是类型安全的。:)因此
document.getElementById()
返回类型
HTMLElement
，该类型不包含
value
属性。但是，子类型
HTMLInputElement
包含
value
属性。
因此，一个解决方案是将
getElementById()
的结果转换为
HTMLInputElement
，如下所示：
var inputValue = (<HTMLInputElement>document.getElementById(elementId)).value;
<>
是typescript中的转换操作符。请参阅问题
TypeScript: casting HTMLElement
。
从上面的代码行得到的javascript如下所示：
inputValue = (document.getElementById(elementId)).value;即不包含类型信息。
Stefano Zanini
修改于2017-04-12 17:15
得票数
-2
问题：
类型'HTMLElement‘上不存在文本错误属性’
‘
解决方案:在typeScript中，我们需要强制转换
document.getElementById()
，它在
< HTMLScriptElement >
中返回类型
HTMLElement
因此，我们可以通过以下方式来解决 typescript.js 所期望的错误
Code: var content: string = ( < HTMLScriptElement > document.getElementById(contentId)).text;它对我很有效..希望它也适用于你。
Michael
回答于2017-05-07 02:06
得票数
113
如果您正在使用react，则可以使用
as
操作符。
let inputValue = (document.getElementById(elementId) as HTMLInputElement).value;
KidKode
回答于2018-01-09 17:26
得票数
14
此外，对于任何使用属性(如Props或Refs )而不使用“DocgetId”的人，您可以：
("" as HTMLInputElement).value;其中反转引号是您的属性值，因此示例如下所示：
var val = (this.refs.newText as HTMLInputElement).value;
alert("Saving this:" + val);
Leo
修改于2020-12-29 07:26
得票数
45
我们可以 assert
const inputElement: HTMLInputElement = document.getElementById('greet')
或使用
as
-syntax
const inputElement = document.getElementById('greet') as HTMLInputElement给予
const inputValue = inputElement.value // now inferred to be string
Rohit Grover
回答于2019-09-17 17:02
得票数
7
如果你使用的是angular，你可以使用-
const element = document.getElementById('elemId') as HTMLInputElement;
Dharman
修改于2019-11-05 05:05
得票数
1
这对我来说很有效：
let inputValue = (swal.getPopup().querySelector('#inputValue ')as HTMLInputElement).value
JaMondo
回答于2020-08-02 23:11
得票数
0
如果您有需要指定动态值的动态元素ID，则可以使用以下命令：
//element_id = you dynamic id.
//dynamic_val = you dynamic value.
let _el = document.getElementById(element_id);
_el.value = dynamic_val.toString();这对我很有效。
CertainPerformance
回答于2021-01-10 03:03
得票数
6
有一种方法可以在不使用类型断言的情况下实现这一点，方法是使用 generics ，它通常使用起来更好、更安全。
不幸的是，
getElementById
不是通用的，但
querySelector
是：
const inputValue = document.querySelector<HTMLInputElement>('#greet')!.value;
类似地，您可以使用
querySelectorAll
选择多个元素并使用泛型，这样TS就可以理解所有选择的元素都是特定类型的：
const inputs = document.querySelectorAll<HTMLInputElement>('.my-input');
这将生成一个
NodeListOf<HTMLInputElement>
。
emmaakachukwu
回答于2021-05-04 00:08
得票数
11
对于那些可能还在为此而苦苦挣扎的人，另一种选择是使用
(document.getElementById(elementId) as HTMLInputElement).value = ''
。
source
。
如果您仍然面临问题，那么尝试将其提取到如下函数中：
function myInput() { (document.getElementById(elementId) as HTMLInputElement).value = '' }
jfunk
回答于2021-09-24 21:10
得票数
0
这可能看起来很陈词滥调，但这是对我有用的：
yarn add -D @types/web
我想我一定是有一个过时的类型定义。
Stebenwolf
修改于2021-10-13 14:11
得票数
1
我也遇到过类似的问题( TS warning in JS file: "Property X does not exist on type X": is it possible to write cleaner JavaScript? )
虽然标记帮助删除了typescript文件中的警告，但在编译后，我的JavaScript文件中仍然会收到警告。
那么，如何编写干净的、允许我操作.value的代码呢？
我花了相当长的时间，但我通过另一种方法找到了解决方案：
HTML代码：
<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">
推荐文章