JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › document.querySelector typings fail when use smart.grid.d.ts
- This topic has 2 replies, 2 voices, and was last updated 1 year, 9 months ago by svetoslav_borislavov.
-
AuthorPosts
-
December 19, 2022 at 6:04 pm #104136Hugh AndersonParticipant
After I have added smart grid to my Typescript solution, all of the calls to
document.querySelector
anddocument.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, 9 months ago by Hugh Anderson.
December 19, 2022 at 6:09 pm #104138Hugh AndersonParticipantI 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>December 20, 2022 at 6:58 am #104139svetoslav_borislavovParticipantHi,
May you, please share your tsconfig.json?
If possible, you can also share a whole demo here on to our email: support@jqwidgets.comWe will be happy to help you!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.