JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid document.querySelector typings fail when use smart.grid.d.ts

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #104136
    Hugh Anderson
    Participant

    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.

    #104138
    Hugh Anderson
    Participant

    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>

    #104139

    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/

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.