如何使用 TypeScript 在 Vue“数据”选项中使用 JQuery 元素？

Posted 2023-02-23

【中文标题】如何使用 TypeScript 在 Vue“数据”选项中使用 JQuery 元素？

【英文标题】：How to use a JQuery element in Vue 'data' option using TypeScript?

【发布时间】：2019-01-05 14:16:51

【问题描述】：

我希望在 vue 'data' 对象中保留一个 jQuery 元素的引用，但 TypeScript 向我抱怨类型不匹配。

我该如何解决这个问题？

[编辑] 认为我通过引用一个不存在的 jQuery 元素作为属性的默认值来欺骗 TS，从而在很大程度上解决了这个问题。之后我可以引用该道具，它认为它是一个 jQuery 元素...... - 虽然它仍然感觉有点“hacky”......

非常感谢任何帮助！

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

    

（下面是代码在屏幕上的样子）

[编辑 2] （'fixed' 版本 - 通过引用不存在的元素使 TypeScript 相信它是一个 jQuery 元素）...

[编辑 3] （另一个不同的'fixed'版本-使用TypeScript正确定义属性）..-即使我使用'any'作为退出子句，因为jQuery返回一个JQuery | undefined back 很难处理...

【问题讨论】：

我认为这可能对你有用：***.com/questions/43783307/…

谢谢，但是我已经在全球范围内导入了 jQuery，而且效果很好 - 我的问题纯粹是关于如何摆脱上图中的红色“波浪线”

我知道问题一定在于 TS 可以推断 _componentDidMount 属性的类型但不能设置 _myJQueryElement 属性，除非我给出某种默认值？ - 我也尝试过并且将问题减半......（参见上面的编辑图片）

【参考方案1】：

正确的类型应该是：

_myJqueryElement: JQuery<htmlElement>

【讨论】：

感谢您的回答，但这也不起作用（我已经尝试过了）。正如我试图逃避的那样，TS 编译器从“数据”返回对象中推断出类型，所以我需要将我的 _myJQueryElement 属性指定为（如果有的话） - 基本上，我该如何摆脱红色'潦草的线条！

你能提供一些你的问题吗？我试图在这里重现：stackblitz.com/edit/typescript-zpgtbw 并且它有效

它需要 Vue - 你使用 Vue 吗？问题在于“数据”对象的设置方式。如果不是 TypeScript，这一切都不是问题 :(

我在 vue 模型中尝试了与您完全相同的代码，它也可以工作