如何将JQuery导入到TypeScript文件中？

Question

更新

不需要导入任何内容。相反，我需要在文件顶部添加一个引用。因此，我的WebAPI.js的第一行应该是/// <reference path ="../typings/jquery/jquery.d.ts"/>而不是import { $ } from '../jquery-3.1.1';

---

我正在尝试在Typescript文件中导入jQuery，但我尝试的所有方法都遇到了各种错误。我按照这里和这里的解决方案进行了操作，但没有成功。

tsconfig.json

{
    "compilerOptions": {
        "removeComments": true,
        "preserveConstEnums": true,
    "out": "Scripts/CCSEQ.Library.js",
    "module": "amd",
        "sourceMap": true,
    "target": "es5",
    "allowJs": true
}

WebAPI.js

import { $ } from '../jquery-3.1.1';

export class ExpenseTransaction extends APIBase {

    constructor() {
        super();
    }

    Get(): void {
        let expenses: Array<Model.ExpenseTransaction>;
        let self = this;
        $.ajax({
            url: this.Connection,
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            success: function (data: any): void {
                expenses = self.ConvertToEntity(data.value);
            },
            error: function (data: any): void { console.log(data.status); }
        });
    };
}

我也尝试过 import * as $ from '../jquery.3.1.1'

错误

• 模块 jquery-3.1.1 没有导出成员 $
• 类型 (selector: any, context: any) => any 上不存在属性 ajax

- Tim Hutchison

---

你安装了类型定义吗？npm install --save-dev @types/jquery - Rens

@Rens 我从 NuGet 下载了 typings/jquery/jquery.d.ts 文件。这是同一个东西吗？ - Tim Hutchison

你安装了这个包吗？https://www.nuget.org/packages/jquery.TypeScript.DefinitelyTyped/ - Rens

@Rens 是的，我做了。 - Tim Hutchison

Answer 1

根据TypeScript的文档和jQuery的定义文件，你需要将其导入为import * as $ from "jquery";，该模块被定义为环境模块。

declare module "jquery" {
    export = $;
}

根据这里的说法：

声明环境是您与编译器所做出的承诺。如果在运行时不存在它们，而您尝试使用它们，那么事情将毫无预警地崩溃。

- Marco Maldonado

---

最简单的方法是只需使用 import * as jQuery from 'jquery';，然后在所有地方使用 jQuery 而不是 $。 - Rosdi Kasim

Answer 2

不需要导入。相反，在文件顶部添加对Typescript定义文件的引用。因此，WebAPI.js 的第一行应该是：

/// <reference path ="../typings/jquery/jquery.d.ts"/> 

而不是

import { $ } from '../jquery-3.1.1';

根据DefinitelyTyped wiki，TypeScript声明文件是定义外部第三方JavaScript库中类型、函数和参数的一种方式。在TypeScript代码中使用声明文件将使Intellisense和类型检查针对您正在使用的外部库生效。 jquery.d.ts是GitHub上DefinitelyTyped Library的一部分。可以通过NuGet软件包管理器将Definitely Typed包含在Visual Studio项目中。

- Tim Hutchison

Answer 3

做这个：在使用npm安装jquery或使用cdn后

第一步：

npm install @types/jquery --save-dev

以及之后：

import * as $ from 'jquery';

- Madiop Niang

Answer 4

ES5

导入模块的方式非常简单:

import * as $ from 'jquery';

只有在安装相关的.d.ts文件后，才能实现：

npm install @types/jquery --save-dev

ES6

与上文相同，但如果您想将 "$" 作为函数来使用，以监听文档就绪事件（例如 "$(function () { ... })"），请继续阅读。

首先，在 tsconfig.json 文件中进行如下设置：

{
    "compilerOptions": {
        "esModuleInterop": true
    }
}

那么就不要使用 "* as " 的方式进行导入，可以采用以下方式：

import $ from 'jquery';

另请参阅stackoverflow.com/Understanding-esModuleInterop

- Top-Master

Answer 5

使用引用编译器指令的Tim解决方案是可行的，但现在有一种更简单的方法。

在tsconfig.json中，如果设置了typeRoots，则无需在.ts文件中进行任何操作。 TypeScript会为您完成这项工作。

它是如何工作的？

在我的解决方案中，我通过npm导入了所有的@types，因此它们被放置在./node_modules/@types中。我还手动创建了一些类型，放在./@types中。

在我的tsconfig.json中，我添加了：

 "compilerOptions": {     
   // lots of other config here
   "typeRoots": [
     "./node_modules/@types",
     "./@types"
   ]
  }

现在我的所有类型都被编译器自动发现和使用，所以不需要再烦恼引用标签了！ 总之... 值得注意的是，如果你这样做并尝试显式导入jquery，它将失败，你会感到困惑。我也是。

- Brian MacKay

---

我的 tsconfig 没有定义 typeRoots，仍然引用了 @types。因此我遇到了问题。它在编译时不会抱怨，但在运行时它会给出错误。所以即使我不包含 import，它也不会抱怨。 - Anonymous Creator

也许需要定义一下？在这里查看文档：https://www.typescriptlang.org/docs/handbook/tsconfig-json.html，找到“@types、typeRoots和types”部分。它描述了默认情况下如何尝试找到所有可见的@types，并且似乎这种行为在您的生产环境中无法正常工作。 - Brian MacKay

Answer 6

尝试将您的导入替换为declare let $: any;

- Anshu Bansal

---

这样做的问题在于，您将失去针对JQuery命名空间的所有Intellisense和类型检查。 - saluce

Answer 7

在Visual Studio Community中，为了进行工作，我必须在HTML的头部/脚本部分添加jQuery，然后在jQuery脚本部分下方添加我的app.ts，最后在我的TypeScript源代码中添加对jQuery库的引用。

在HTML页面中，头部部分：

<script src="./Scripts/jquery-3.5.1.js"></script>
<script src="app.js"></script>

在 app.ts 文件中，ts 脚本的第一行是：

/// <reference path ="./Scripts/typings/jquery/jquery.d.ts"/>

- zed