Typescript中的querySelector

Question

有没有办法让TypeScript不抛出错误＆＃39; TS2339：属性值不存在于元素＆＃39;对于像这样的代码？：

myRow.querySelector('.my-class').value = myVal

施放为＆lt; HTMLInputElement＆gt;导致代码完全崩溃。

除非我遗漏了某些东西，否则打字稿似乎不能很好地处理涉及DOM的事情;即它选择特定的一般来说可以返回任何元素的函数。

Answer 1

querySelector方法返回Element | null 如果您没有使用strictNullChecks，那么Element，并且它没有value成员。

正如我在评论中写的那样把它投射到HTMLInputElement：

let myRow = document.getElementById('my-row');
(myRow.querySelector('.myClass') as HTMLInputElement).value = " a vaule";

您收到的错误是由于忘记了第一行末尾的分号，结果是编译器认为您正在尝试执行此操作：

document.getElementById('my-row')(myRow.querySelector('.myClass') as HTMLInputElement)

不要忘记用分号结尾。

修改

querySelector方法是通用的，因此您也可以这样做：

document.getElementById('my-row').querySelector<HTMLInputElement>('.myClass').value

如果您确定元素在那里strictNullChecks，则可以使用Non-null assertion operator：

document.getElementById('my-row')!.querySelector<HTMLInputElement>('.myClass')!.value