使用 Typescript 时如何停止“类型 JQuery 上不存在属性”语法错误？

Posted 2023-03-13

【中文标题】使用 Typescript 时如何停止“类型 JQuery 上不存在属性”语法错误？

【英文标题】：How can I stop "property does not exist on type JQuery" syntax errors when using Typescript?

【发布时间】：2014-09-18 23:27:59

【问题描述】：

我在我的应用程序中只使用了一行 jQuery：

$("div.printArea").printArea();

但这给了我一个 Typescript 错误：

JQuery 类型上不存在属性“printArea”？

谁能告诉我如何阻止这个错误的出现？

【参考方案1】：

您可以将其转换为 <any> 或扩展 jquery 输入以添加您自己的方法。

 (<any>$("div.printArea")).printArea();

//或者添加你自己的自定义方法（假设这是你自己作为自定义插件的一部分添加的）

interface JQuery 
    printArea():void;

【讨论】：

给我：Error:(44, 23) TS2339: Property 'printArea' does not exist on type 'ElementFinder'.

如果您在外部模块中尝试interface JQuery 方式并将函数参数定义为 JQuery 类型并尝试从另一个文件调用它，TypeScript 会抱怨有两种名为 JQuery 的类型不相关.

声明接口似乎很好用。它也比投射到 任何地方

要干净得多

这对我不起作用，但最终我偶然发现了***.com/questions/30960386/…，并意识到我需要在接口声明周围使用declare global ... 。

【参考方案2】：

由于 printArea 是一个 jQuery 插件，它不包含在 jquery.d.ts 中。

您需要创建一个 jquery.printArea.ts 定义文件。

如果您为插件创建完整的定义文件，您可能需要将其提交给DefinitelyTyped。

【讨论】：

并确保您的 tsconfig.json 也设置正确。如果它具有“类型”设置，则只会识别列出的类型。如果没有，那么它将识别 node_modules/@types 中的所有内容

【参考方案3】：

对于您的示例，您将添加以下内容：

interface JQuery
    printArea():void;

编辑：哎呀，下面的 basarat 是正确的。我不确定为什么我认为它正在编译，但我已经更新了这个答案。

【讨论】：

不。他正在用 $ 包裹一个对象。它不再是静态的 $

嗯，你确定？我在一个项目中对其进行了测试，并且成功了。

是的。您的案例$.inviewport(el) 运维案例$('selector').printArea

对不起，我不想吹毛求疵，但我的代码对我有用。问题似乎是关于让代码编译，所以如果我的代码编译，它有什么问题？请注意，我使用 printArea() 的第二个示例也可以。

$('selector').printArea 编译？我不这么认为。 $.printArea 会编译。你一直很有礼貌，所以没有冒犯或故意冒犯:)

【参考方案4】：

我认为这是最易读的解决方案：

($("div.printArea") as any).printArea();

【参考方案5】：

你可以把它转换成

(<any>$('.selector') ).function();

例如：使用 jquery 初始化日期选择器

(<any>$('.datepicker') ).datepicker();

【参考方案6】：

你也可以这样写：

let elem: any;
elem = $("div.printArea");
elem.printArea();

【参考方案7】：

您也可以使用忽略语法而不是使用（或更好的“as any”）表示法：

// @ts-ignore
$("div.printArea").printArea();