![]() |
失落的木瓜 · springboot ...· 7 月前 · |
![]() |
面冷心慈的花卷 · 实例! 领域驱动四色建模法分析需求 - 知乎· 1 年前 · |
![]() |
胆小的青椒 · 学习笔记:高性能IO框架库Libevent( ...· 1 年前 · |
![]() |
谦虚好学的铁板烧 · git初始化与克隆(git init 与 ...· 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的新手,所以我可能遗漏了一些明显的东西。:)
问题出在这里:
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或多或少与这些是一致的。
解决这个问题的一种快速方法是使用选择属性。
function greet(elementId) {
var inputValue = document.getElementById(elementId)["value"];
if(inputValue.trim() == "") {
inputValue = "World";
document.getElementById("greet").innerText = greeter(inputValue);
}
我只是尝试了几种方法,找到了这个解决方案,
我不知道你的原始脚本背后有什么问题。
作为参考,你可以参考Tomasz Nurkiewicz的帖子。
尝试将要更新的元素强制转换为HTMLInputElement。正如在其他答案中所述,您需要提示编译器这是一种特定类型的HTMLElement:
var inputElement = <HTMLInputElement>document.getElementById('greet');
inputElement.value = greeter(inputValue);
根据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;
即不包含类型信息。
问题:
类型'HTMLElement‘上不存在文本错误属性’
‘
解决方案:在typeScript中,我们需要强制转换
document.getElementById()
,它在
< HTMLScriptElement >
中返回类型
HTMLElement
因此,我们可以通过以下方式来解决 typescript.js 所期望的错误
Code: var content: string = ( < HTMLScriptElement > document.getElementById(contentId)).text;
它对我很有效..希望它也适用于你。
如果您正在使用react,则可以使用
as
操作符。
let inputValue = (document.getElementById(elementId) as HTMLInputElement).value;
此外,对于任何使用属性(如Props或Refs )而不使用“DocgetId”的人,您可以:
("" as HTMLInputElement).value;
其中反转引号是您的属性值,因此示例如下所示:
var val = (this.refs.newText as HTMLInputElement).value;
alert("Saving this:" + val);
我们可以 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
如果你使用的是angular,你可以使用-
const element = document.getElementById('elemId') as HTMLInputElement;
这对我来说很有效:
let inputValue = (swal.getPopup().querySelector('#inputValue ')as HTMLInputElement).value
如果您有需要指定动态值的动态元素ID,则可以使用以下命令:
//element_id = you dynamic id.
//dynamic_val = you dynamic value.
let _el = document.getElementById(element_id);
_el.value = dynamic_val.toString();
这对我很有效。
有一种方法可以在不使用类型断言的情况下实现这一点,方法是使用 generics ,它通常使用起来更好、更安全。
不幸的是,
getElementById
不是通用的,但
querySelector
是:
const inputValue = document.querySelector<HTMLInputElement>('#greet')!.value;
类似地,您可以使用
querySelectorAll
选择多个元素并使用泛型,这样TS就可以理解所有选择的元素都是特定类型的:
const inputs = document.querySelectorAll<HTMLInputElement>('.my-input');
这将生成一个
NodeListOf<HTMLInputElement>
。
对于那些可能还在为此而苦苦挣扎的人,另一种选择是使用
(document.getElementById(elementId) as HTMLInputElement).value = ''
。
source
。
如果您仍然面临问题,那么尝试将其提取到如下函数中:
function myInput() { (document.getElementById(elementId) as HTMLInputElement).value = '' }
这可能看起来很陈词滥调,但这是对我有用的:
yarn add -D @types/web
我想我一定是有一个过时的类型定义。
我也遇到过类似的问题( 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">
![]() |
面冷心慈的花卷 · 实例! 领域驱动四色建模法分析需求 - 知乎 1 年前 |