0

I wish to hold onto a reference of a jQuery element in the vue 'data' object but TypeScript is complaining at me that the type does not match.

How can I fix this?

[EDIT] Think I largely fixed this by fooling TS by referencing a non-existing jQuery element as a default value to the property. After that I can reference the prop and it believes it is a jQuery element... - it still feels a little 'hacky' though...

Any help much approciated!

var x = Vue.extend({
data: function () {
    return {
      _componenentDidMount: false,
      _myJQueryElement: undefined,
    }
},
mounted: function () {
    // remember we are now mounted
    this._componenentDidMount = true;                       // this is OK

    // on mounting I wish to set the '_myJQueryElement' 
    this._myJQueryElement = $('.z-vertical-scrollbar');     // this FAILS
},
methods: {
    B() {

        // I can do this...  (typescript cleverly infers the type to be 'boolean')
        var didMount = this._componenentDidMount;           // this is OK

        // Now I wish to do 'jquery' stuff with the element
        var top = this._myJQueryElement.offset().top;       // this FAILS

    }
}

}

(below is what the code looks like on the screen)

enter image description here

[EDIT 2] (the 'fixed' version - making TypeScript believe it is a jQuery element by referencing a non existing element)...

enter image description here

[EDIT 3] (yet another differently 'fixed' version - using TypeScript to define the properties properly).. - even though I am using 'any' as a get-out clause since jQuery returns a JQuery | undefined back which is tricky to handle...

enter image description here

Marcel
  • 2,148
  • 6
  • 31
  • 48
  • I think this could be useful for you: https://stackoverflow.com/questions/43783307/how-to-import-jquery-into-a-typescript-file – Sergeon Jul 28 '18 at 22:05
  • Thanks, but I have jQuery already globally imported and it works well - my question is purely on how to get rid of the red 'squiggly lines in the above image – Marcel Jul 29 '18 at 07:48
  • I know the problem must lie with the fact that TS can infer the type of the _componentDidMount property but can't set the _myJQueryElement property unless I give is some sort of default? - which I have also tried and kind of halves the issue... (see edited picture above) – Marcel Jul 29 '18 at 07:50

1 Answers1

0

The correct type should be:

_myJqueryElement: JQuery<HTMLElement>
Charles Assuncao
  • 548
  • 3
  • 11
  • Thanks for your answer but that does not work either (I tried that already). As I am trying to elude to, the TS compiler infers the type from the 'data' return object, so what do I need to specify my _myJQueryElement property to be (if anything) - basically, how do I get rid of the red 'scribbly lines'! – Marcel Jul 29 '18 at 07:43
  • Can you provide some repo with you problem? I tried to reproduce here: https://stackblitz.com/edit/typescript-zpgtbw and it works – Charles Assuncao Jul 29 '18 at 08:57
  • It requires Vue - do you use Vue? The problem is within the way the 'data' object is setup. If it wasn't for TypeScript none of this would be an issue :( – Marcel Jul 29 '18 at 09:08
  • I tried your exact same code, here in a vue mockup and it works also – Charles Assuncao Jul 29 '18 at 09:08