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

Question

I'm using Typescript for Puppeteer. I'm trying to get innerText from an element.

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

I'm getting the error:

Property 'innerText' does not exist on type 'Element'

I tried casting to HTMLElement like described in this question: error " Property 'innerText' does not exist on type 'EventTarget' "?

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

As well as creating my own Interface like this:

interface TextElement extends Element {
    innerText: string;
}

But in each case I'm getting the error that innerText does not exist on this particular type.

Property 'innerText' does not exist on type 'HTMLElement'

Why is this happening and how to deal with this?

Answer 1

You can fix it like this:

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

or:

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

UPDATE:

So, after some exchange on Github , it's clear why the syntax from this question does not work. It actually defines anonymous generic function.

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

Clearer example would be following:

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

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

Unfortunate naming of T as HTMLElement creates confusion.

Answer 2

For those who needs to fix this error for any element returned from querySelector :

const el = document.querySelector<HTMLElement>('#app');

if (el) {
  el.innerText = content;
}