document.querySelector typings fail when use smart.grid.d.ts

[Hugh Anderson]

After I have added smart grid to my Typescript solution, all of the calls to document.querySelector and document.querySelectorAll have failure in the typings which is due to the smart.grid.d.ts that was added.

Here is a call which is failing, this was copied from your Codepen example:

const checkboxCells = Array.from(document.querySelectorAll('smart-grid smart-grid-cell[header]'));

At compile time it is giving this error:

[ ERROR ] TypeScript: ./src/components/ace-data-grid/mock-props.ts:30:72
No overload matches this call.Overload 1 of 3, ‘(selectors: “smart-element”): NodeListOf<Element>’, gave the
following error.Argument of type ‘”smart-grid smart-grid-cell[header]”‘ is not assignable to parameter of
type ‘”smart-element”‘.Overload 2 of 3, ‘(selectors: “smart-chart”): NodeListOf<Chart>’, gave the following
error.Argument of type ‘”smart-grid smart-grid-cell[header]”‘ is not assignable to parameter of type
‘”smart-chart”‘.Overload 3 of 3, ‘(selectors: “smart-grid”): NodeListOf<Grid>’, gave the following
error.Argument of type ‘”smart-grid smart-grid-cell[header]”‘ is not assignable to parameter of type
‘”smart-grid”‘.

When I right click on the querySelectorAll and go to definition it takes me to this part of smart.grid which has hijacked the type definition, I find this in smart.grid.d.ts:
<div>

<div>declare global {</div>
<div>    interface Document {</div>
<div>        createElement(tagName: “smart-grid”): Grid;</div>
<div>        querySelector(selectors: “smart-grid”): Grid | null;</div>
<div>        querySelectorAll(selectors: “smart-grid”): NodeListOf<Grid>;</div>
<div>        getElementsByTagName(qualifiedName: “smart-grid”): HTMLCollectionOf<Grid>;</div>
<div>        getElementsByName(elementName: “smart-grid”): NodeListOf<Grid>;</div>
<div>    }</div>
<div>}</div>

</div>
 

This is not acceptable because it is interfering with our existing types, even though in other places we do not explicitly reference the document as a type, it is coming from the tsconfig which is using lib: [“dom”] where it is supposed to find those types.

Please give advice how I can workaround this type definition and how to fix the other references to document type in our app now that we have installed smart-grid.

• This topic was modified 1 year, 4 months ago by Hugh Anderson.

[Hugh Anderson]

I discovered a workaround which i don’t think i should have to do

(document as ParentNode).querySelectorAll(...)
<div></div>
<div>I don’t think it should be necessary to cast document like that.  But at least I am unblocked.  What can we do about typings of this lib overwriting the real typings of Document?</div>

[svetoslav_borislavov]

Hi,

May you, please share your tsconfig.json?
If possible, you can also share a whole demo here on to our email: support@jqwidgets.com

We will be happy to help you!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts