Typescript中的querySelector

kcrjzv8t  于 2023-04-22  发布在  TypeScript
关注(0)|答案(4)|浏览(260)

有没有一种方法可以让TypeScript不会为这样的代码抛出错误'TS2339: property value does not exist on type Element'

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

强制转换为< HTMLInputElement >导致代码完全中断。
Typescript似乎不能很好地处理涉及DOM的事情,除非我遗漏了什么;也就是说,对于可以返回任何元素的函数,它选择specific而不是general。

00jrzges

00jrzges1#

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-nullAssert操作符:

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

wmtdaxz32#

这里的其他答案都没有帮助。我在其他地方通过反复试验发现

  1. querySelector是HTMLElement
  2. querySelectorAll是它们的数组HTMLElement[]
sections: HTMLElement[] = [];

this.sections = someElement.nativeElement.querySelectorAll('li') as HTMLElement[];
zbdgwd5y

zbdgwd5y3#

//  define
export const $ = <T>(selector, scope = document): T =>
  scope.querySelector(selector);

//  use
const $account: HTMLInputElement = $("#login-account");

// example tips for  .value
const account = $account.value
0ejtzxu1

0ejtzxu14#

我是这样做的:

const myClass: HTMLInputElement | null = document.querySelector(".my-class") as HTMLInputElement;

if (myClass) {
    myClass.value = myVal;
}

相关问题