[@types/jquery] Return type for .get() is HTMLElement, should be HTMLElement | undefined

[ethanredmond2]

JQuery's .get() method reports that it always returns Element, however in practice we can see that this is not always true, for example where there is no element with the ID asdf:

$('#asdf').get(0).tagName

Uncaught TypeError: Cannot read property 'tagName' of undefined

To fix this, you could change the return type of .get() to HTMLElement | undefined. This may cause new warnings when other projects update their version of @types/jquery, however I believe it'll prevent possible JavaScript errors at runtime.

TypeScript's strictNullChecks setting is specifically designed to warn about this kind of problem, for example, document.getElementById() returns HTMLElement | undefined. This encourages safer coding practices like optional chaining, e.g. document.getElementById('asdf')?.focus()

@leonard-thieu @borisyankov @choffmeister @Diullei @tasoili @jasons-novaleaf @seanski @Guuz @ksummerlin @basarat @nwolverson
@derekcicerone @AndrewGaspar @seikichi @benjaminjackman @s093294 @JoshStrobl @johnnyreilly @DickvdBrink @King2500 @terrymun @martin-badin

_{(I'm using TypeScript 3.9.9 and @types/jquery 3.5.5)}

[martin-badin]

Please. Can you try?

$<HTMLElement>('#asdf').get(0).tagName

[ethanredmond2]

@martin-badin Hi Martin, I'm sorry, I don't understand how casting .get(0) to HTMLElement will solve the problem that TypeScript doesn't warn that the return value might be undefined, since .get(0) already returns type HTMLElement. Thanks

[martin-badin]

I'm sorry, I misunderstood. By the documentation is the return type correct https://api.jquery.com/get/. I know what you have in your mind but I think that your example/code is wroten wrong. Your code should be like this because $('#asdf') can return HTMLElement or undefined or an empty array od HTMLElements.

if($('#asdf').length) {
  $('#asdf').get(0).tagName
}

[ethanredmond2]

Yes, to prevent errors where there's no element with ID asdf, I could write:

var $asdf = $('#asdf');
if ($asdf.length) {
    $asdf.get(0).tagName
}

Or equally:

$('#asdf').get(0)?.tagName

I'm filing this issue because .get(0) can indeed return undefined, but @types/jquery doesn't acknowledge this, saying instead that .get(0) can only return HTMLElement. This is incorrect because when there's no element with ID asdf and you call $('#asdf').get(0), it does return undefined, so to make the types more accurate, the return type for .get(0) should be HTMLElement | undefined.

[miken32]

@martin-badin FYI, documentation you linked to states "If the value of index is out of bounds — less than the negative number of elements or equal to or greater than the number of elements — it returns undefined."

[princefishthrower]

@ethanredmond2 - I agree with you - it's exactly what the docs state. I've made a pull request for this change: #56118

[HolgerJeromin]

I think we can close this issue as solved.

[peterblazejewicz]

fixed in #56118