“元素”类型上不存在属性“内部文本”答案

【问题标题】：Property 'innerText' does not exist on type 'Element'“元素”类型上不存在属性“内部文本”
【发布时间】：2019-12-24 08:51:52
【问题描述】：

我正在为 Puppeteer 使用 Typescript。我正在尝试从元素中获取 innerText。

const data = await page.$eval(selector, node => node.innerText);

我收到了错误：

“元素”类型上不存在属性“innerText”

我尝试像这个问题中描述的那样转换为 HTMLElement： error " Property 'innerText' does not exist on type 'EventTarget' "?

const data = await page.$eval(selector, <HTMLElement>(node: HTMLElement) => node.innerText);

以及像这样创建我自己的界面：

interface TextElement extends Element {
    innerText: string;
}

但在每种情况下，我都会收到此特定类型上不存在 innerText 的错误。

“HTMLElement”类型上不存在属性“innerText”

为什么会发生这种情况以及如何处理？

【问题讨论】：

您是否考虑过改用更标准的textContent？
你为什么不试试这个 - await page.evaluate(() => document.querySelector("your_selector").innerText) 在尝试在控制台中执行这个 document.querySelector("your_selector").innerText 以检查你是否得到了所需的结果。
@CertainPerformance - 你说得对，textContent 似乎有效。但是我实际上确实需要 innerText 的附加功能。但我想知道为什么它甚至在我自己的界面上也不起作用？
@PySaad 这会引发同样的错误。
innerText 有时可能比 textContent 更可取，如果混合中有子元素和空格。 perfectionkills.com/the-poor-misunderstood-innerText

标签： javascript typescript puppeteer

【解决方案1】：

你可以这样修复它：

const data = await page.$eval(selector, node => (node as HTMLElement).innerText);

或：

const data = await page.$eval(selector, node => (<HTMLElement>node).innerText);

更新：

所以，在Github 上进行了一些交流之后，很清楚为什么这个问题的语法不起作用。它实际上定义了匿名泛型函数。

<HTMLElement>(node: HTMLElement) => node.innerText

更清晰的例子如下：

function myFunction<T>(node: T) {
    node.innerText; // Property 'innerText' does not exist on 'T'
}

const data = await page.$eval(selector, myFunction);

不幸地将T 命名为HTMLElement 会造成混乱。

【讨论】：

你是对的。有用。谢谢你。想解释一下为什么我的解决方案不起作用？