Fix types

[karlhorky]

Hi there, first of all, thanks so much for Cheerio! Cool to be able to load an HTML string in anywhere and traverse so easily.

Shouldn't .get() always return either Element[], an Element or undefined?

[5saviahv]

Nice work

[5saviahv]

I believe idea here was test does "cheerio.load" accepts type "Element" as input, but I also did see error with last commit, so maybe cast it instead:

const $fromElement = cheerio.load($('ul').get(0) as Element);

I know type "Element" is not defined, but we could import it

import type { Element } from 'domhandler';

[karlhorky]

That's what I thought at first too, but I tested the code, and it turns out that code is actually broken, even in JavaScript:

const $fromElement = cheerio.load($('ul').get(0));

It throws an error. cheerio.load() doesn't accept an Element.

[5saviahv]

Interesting, I tested it and tsd didn't complain. I also tested load function with and it worked, like expected.

const cheerio = require('cheerio');
const html = 
  '<ul id="fruits">\n<li class="orange">Apple</li>\n<li class="class">Orange</li>\n<li class="pear">Pear</li>\n<input type="text" />\n</ul>';

const $ = cheerio.load(html);
const $fromElement = cheerio.load($('li').get(0));

console.log(cheerio.html($fromElement._root));

I copied what you did and added casting cb6f40 and it works. Interesting why it fails on you.

[karlhorky]

I'm not talking about tsd / TypeScript though - did you try actually running that as JavaScript? cheerio.load() with an element throws an error - at least it did in my testing.

The type for the load method also seems to indicate that it does not accept an element.

[karlhorky]

Ah sorry I think I was looking at the wrong overload. It does seem to accept an element here:

cheerio/types/index.d.ts

Line 282 in 1c2c0c0

load(element: Element | Element[], options?: CheerioParserOptions): Root;

[karlhorky]

I've added the cast now, if you would prefer that over the .html() method.

Not sure why it errored for me, but if you think it works, then we can go ahead like this.

[5saviahv]

I have to admit I rarely use typescript, I do see why it is useful but still. I know there was issue with element (still are, rc.5 in npm) #1591, but it should be fixed in repo.

[karlhorky]

Right, yeah, that must have been the error that was thrown.

[karlhorky]

And as for the value of TypeScript, it's actually telling us a useful bit of information here:

If the element returned from .get(0) is undefined, then there will be an error with cheerio.load().

So actually, a more robust version of the code (avoiding casting) would be this:

const $ul = $('ul').get(0);

if ($ul) {
  const $fromElement = cheerio.load($ul);

  if ($fromElement('ul > li').length !== 3) {
    throw new Error(
      'Expecting 3 elements when passing `cheerio.Element` to `load()`'
    );
  }
}

But since these are just tests, it doesn't matter too much if there is a cast here.

[fb55]

Thanks a lot @karlhorky!

[karlhorky]

Glad to help :) Thanks for the merge!