如何将 JQuery 导入 Typescript 文件？

Posted 2023-02-22

【中文标题】如何将 JQuery 导入 Typescript 文件？

【英文标题】：How to import JQuery into a Typescript file?

【发布时间】：2017-10-02 15:47:54

【问题描述】：

更新

不需要导入。相反，我需要添加对文件顶部的引用。所以我的 WebAPI.js 的第一行应该是 /// <reference path ="../typings/jquery/jquery.d.ts"/> 而不是 import $ from '../jquery-3.1.1';

---

我正在尝试导入 jQuery 以在 Typescript 文件中使用，但我尝试的所有操作都会收到各种错误。我遵循了here 和here 的解决方案，但没有任何运气。

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'

错误

Module jquery-3.1.1 has no exported member $ Property ajax does not exist on type (selector: any, context: any) => any

【问题讨论】：

你安装了打字机吗？ npm install --save-dev @types/jquery

@Rens 我有来自 NuGet 的 typings/jquery/jquery.d.ts 文件。是一样的吗？

你安装了这个包吗？ nuget.org/packages/jquery.TypeScript.DefinitelyTyped

@Rens 是的，我做到了

【参考方案1】：

你必须将它导入为import * as $ from "jquery";，根据打字稿的documentation，并且jquery's definition file模块被定义为环境模块：

declare module "jquery" 
    export = $;

根据this：

环境声明是您使用编译器做出的承诺。 如果这些在运行时不存在，而您尝试使用它们，那么事情将在没有警告的情况下中断。

【讨论】：

最简单的就是import * as jQuery from 'jquery';，然后在任何地方使用jQuery而不是$。

【参考方案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 包管理器包含在 Visual Studio 项目中。

【参考方案3】：

这样做：在使用 npm 安装 jquery 或与 cdn 一起使用后

第一：

npm install @types/jquery --save-dev

及之后：

从'jquery'导入*为$；

【参考方案4】：

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，它将失败，并且您会感到困惑。我确定是。

【讨论】：

我的 tsconfi 没有定义 typeRoots。它仍然引用@types。因此，我遇到了问题。它在编译时不兼容，但在运行时会出错。因此，即使我不包括 import 它也不会抱怨。

也许可以定义它？在此处查看文档：typescriptlang.org/docs/handbook/tsconfig-json.html 在“@types、typeRoots 和类型”下。它描述了默认情况下它如何尝试查找所有可见的@types，并且似乎这种行为在 prod 中不适合您。

【参考方案5】：

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

【讨论】：

这样做的问题是您会丢失所有 Intellisense 和针对 JQuery 命名空间的类型检查。

【参考方案6】：

在 Visual Studio 社区中，要完成这项工作，我必须在头/脚本部分的 html 中添加 jquery，然后在 jquery 脚本部分下添加我的 app.ts，然后在我的 typescript 源中添加对 jquery lib 的引用。

在html页面中，head部分：

<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"/>