如何在 TypeScript 中使用 jQuery答案

【问题标题】：How to use jQuery with TypeScript如何在 TypeScript 中使用 jQuery
【发布时间】：2015-11-10 02:31:37
【问题描述】：

我在努力

$(function(){ 
    alert('Hello'); 
});

它在 Visual Studio 中显示此错误：(TS) Cannot find name '$'.。如何将 jQuery 与 TypeScript 一起使用？

【问题讨论】：

你可以只包含这行import * as $ from "jquery";

标签： typescript

【解决方案1】：

您很可能需要下载并在您的项目中包含用于 jQuery 的 TypeScript declaration file——jquery.d.ts。

选项 1：安装 @types 包（推荐用于 TS 2.0+）

在与您的 package.json 文件相同的文件夹中，运行以下命令：

npm install --save-dev @types/jquery

然后编译器会自动解析jquery的定义。

选项 2：手动下载（不推荐）

下载here。

选项 3：使用打字（TS 2.0 之前）

如果您使用的是typings，那么您可以这样包含它：

// 1. Install typings
npm install typings -g
// 2. Download jquery.d.ts (run this command in the root dir of your project)
typings install dt~jquery --global --save

设置好定义文件后，将别名 ($) 导入所需的 TypeScript 文件中即可正常使用。

import $ from "jquery";
// or
import $ = require("jquery");

您可能需要使用 --allowSyntheticDefaultImports 进行编译——在 tsconfig.json 中添加 "allowSyntheticDefaultImports": true。

还要安装软件包吗？

如果您没有安装 jquery，您可能希望通过 npm 将其安装为依赖项（但并非总是如此）：

npm install --save jquery

【讨论】：

必须重新启动 Visual Studio 才能正常工作，这只是一小步，但让我绊倒了一点。
@daslicht 检查this question
帮助别人：那么你只需要安装jquery： npm install jquery 并使用它 import $ = require('jquery');
也可以使用import * as $ from 'jquery'
我收到错误Error TS1192 Module '"jquery"' has no default export.

【解决方案2】：

就我而言，我必须这样做

npm install @types/jquery --save-dev // install jquery type as dev dependency so TS can compile properly
npm install jquery --save // save jquery as a dependency

然后在脚本文件A.ts

import * as $ from "jquery";
... jquery code ...

【讨论】：

【解决方案3】：

对于 Visual Studio 代码

对我有用的是确保我通过 index.html 中的标记加载标准 JQuery 库。

运行

npm install --save @types/jquery

现在 JQuery $ 函数在所有 .ts 文件中都可用，不需要任何其他导入。

【讨论】：

您确实需要在您的组件中声明 jquery/$，如果 TsLint 为这些类型的类型检查打开。例如。 javascript declare var jquery: any; declare var $: any;
@Subroto，您的建议工作正常。把它作为一个答案。谢谢。

【解决方案4】：

对于 Angular CLI V2+

npm install jquery --save
npm install @types/jquery --save

确保 jquery 在 angular.json 中有一个条目 -> 脚本

...
    "scripts": [
        "node_modules/jquery/dist/jquery.min.js"
    ]
...

转到 tsconfig.app.json 并在“类型”中添加一个条目

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/app",
        "types": ["jquery","bootstrap","signalr"]
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

【讨论】：

“JQuery”类型上不存在属性“modal”。添加后出现此错误
对于 jquery 类型来解析 tsconfig.app.json "types" 必须设置为 "query"。错误消息告诉您将 jquery 添加到 tsconfig 文件中。
迄今为止的最佳答案。

【解决方案5】：

我相信您可能需要 JQuery 的 Typescript 类型。既然你说你使用的是 Visual Studio，你可以使用 Nuget 来获取它们。

https://www.nuget.org/packages/jquery.TypeScript.DefinitelyTyped/

Nuget 包管理器控制台中的命令是

Install-Package jquery.TypeScript.DefinitelyTyped

更新： 如评论中所述，此软件包自 2016 年以来未更新。但您仍然可以访问他们的 Github 页面 https://github.com/DefinitelyTyped/DefinitelyTyped 并下载类型。导航您的库的文件夹，然后在那里下载index.d.ts 文件。在项目目录中的任何位置弹出它，VS 应该立即使用它。

【讨论】：

DefinitelyTypes 的 nuget 包不再维护。如果你这样做，你会得到一个旧版本。

【解决方案6】：

2019 年更新：

David的回答更准确。

Typescript 支持不使用 Typescript 进行库开发的 3rd 方供应商库，使用 DefinitelyTyped Repo。

您确实需要在您的组件中声明 jquery/$，如果这些类型的类型检查的 tsLint 为 On。

例如。

declare var jquery: any;
declare var $: any;

【讨论】：

"如果他们安装了打字" 我不明白。你的意思是没有安装？为什么将它们声明为其他？我只想编译没有错误，不安装任何额外的东西，我正在使用没有类型要安装的库。
@redanimalwar 我想我是这么写的，因为在 reactjs/angular 这样的 web 项目中，如果手动配置 webpack，则全局定义 3rd 方库，并且很难告诉 webpack 这些库是从哪里导入的，因此使用了declare 关键字。但是，如果它们存在于 node_modules 中，我们仍然可以告诉 vscode 有关类型的信息，这就是为什么在智能感知中安装类型有帮助的原因，但是对于一个普通的 webpack 项目，没有 declare 关键字项目编译失败。我已从答案中删除了我的陈述，以免混淆。
无论如何，我已经很长时间没有摆弄 Angular/Typescript，但我觉得，如果安装了类型，我们可以做这样的事情 - import JQuery from 'jquery'; declare var $: JQuery;。不确定，这是否可行。
我一直在 tsconfig 中使用 -typescriptlang.org/docs/handbook/… 来抑制 3rd 方类型问题。

【解决方案7】：

这是我的 TypeScript 和 jQuery 配置步骤。

它使 jQuery 的类型支持比互联网上的大多数文章更好。（我相信。）

第一：

npm install jquery --save
npm install @types/jquery --save-dev

第二（非常非常非常重要！！！）：

import jquery = require("jquery");



// this helps TypeScript to understand jQuery best !!!  otherwise It will confused .
const $: JQueryStatic = jquery;

那么，你可以享受它：

$(document).ready(function () {
    $('btn').click(function () {
       alert('I am clicked !')
    }
}

丝般柔滑！！！

【讨论】：

那么，每个组件的ts文件都要写吗？
@HumbleDolt 如果在【window】上绑定jQuery，只需在yourTypeDeclaration.d.ts中添加declare global { interface Window { $ :JQueryStatic; } }即可。并在适当考虑时，您需要检查 $ 是否安装在【window】中。比如import $ = require('jquery'); window.$ = $ ;，或者你的jQuery【$】已经被外部脚本标签挂载了。
你的意思是，可以在 index.html 中包含一个脚本并在那里写吗？ typeDeclaration.ts 在角度 8 中？有 tsconfig.json
@HumbleDolt 所以，你可以试试第二种解决方案import $ = require('jquery') ; window.$ = $;。（你最好在你的项目起点初始化这个。而且我更喜欢创建一个sdk dir，来管理所有外部库的要求和初始在一个文件或位置）。
@HumbleDolt 【yourTypeDeclaretion.d.ts】只是一个类型定义的文件。这是一个定义你自己类型的特殊文件。在 TypeScript 中，【.d.ts】只是一种显式的隔离方式，用来区分 type-recognize 和 true-code 。您也可以将 type-declaration-snipet 写在【.ts】文件中，它仍然可以工作。（也许有一些语法修复通知）

【解决方案8】：

如果您想在 Web 应用程序（例如 React）中使用 jquery，并且 jquery 已经加载了 <script src="jquery-3.3.1.js"...

在网页上你可以这样做：

npm install --save-dev @types/query
and the use it with:
let $: JQueryStatic = (window as any)["jQuery"];

所以，您不需要第二次加载 jquery（使用npm install --save jquery）但拥有 Typescript 的所有优点

【讨论】：

这解决了我的问题。我已经下载了一个包含许多 jquery 库的模板。我努力让它与反应一起工作。我只需要将 let $: JQueryStatic = (window as any)["jQuery"] 更改为 let $: any = (window as any)["jQuery"] 现在我可以调用每个库，例如 $.HSCore.components ....

【解决方案9】：

现在和今天在 Angular 版本 9 上为我工作

通过 npm 安装：npm i @types/jquery 只需添加 --save 即可全局设置。
转到 tsconfig.app.json 并添加数组 "types" jquery 。
服务完毕。

【讨论】：

【解决方案10】：

您可以通过扩充窗口界面来声明全局变量：

import jQuery from '@types/jquery';

declare global {
    interface Window {
        jQuery: typeof jQuery;
        $: typeof jQuery;
    }
}

来源：

【讨论】：

【解决方案11】：

我在 ASP.Net 核心项目中的 VS 2019 程序。所以我不必乱用 npm 命令行实用程序，而是使用 npm 配置文件采取声明性方法。

你的项目根目录中有 package.json（npm 依赖项配置）吗？
- 如果没有，右键项目->添加->新建项目->（搜索npm）选择npm Configuration File并保持默认文件名package.json
在 devDependencies 下添加一个条目。这告诉 npm 安装“@types/jquery”，这是一个由 DeveloplyTyped 维护的 npm 包。这与其他答案中显示的 npm install 命令基本相同。
```
"devDependencies": {
  "@types/jquery": "3.5.1"
}
```
假设保存文件后，这应该会触发 npm 包安装。我发现我必须右键单击 package.json 文件并单击 Restore Packages（项目处于调试模式时未显示该选项）。
- 第一次运行 npm restore 时，您应该切换到“输出”选项卡/窗口并将下拉列表更改为“npm”以验证没有错误。

您应该在 Project -> node_modules/@types/jquery/ 下看到一个新项目
- index.d.ts 是主要的 typescript 定义文件，它引用了其他文件。

打开您自己的打字稿文件，然后将 index.d.ts 从解决方案资源管理器拖到打开的打字稿文件的第一行。这应该在顶部添加（相对路径将根据您的打字稿文件的位置而有所不同）：
```
/// <reference path="../node_modules/@types/jquery/index.d.ts" />
```
现在，如果您开始在 typescript 文件的函数中编写代码，您应该能够输入 jQue 并获得智能感知完成提示。

注意：最近 VS 在重新启动之前无法正确反映各种变化真的很糟糕，尤其是涉及错误输入和智能感知的事情。即使在官方 MS 文档中，您也经常可以看到它们提到需要重新启动以解决红色波浪线等问题。因此，如有疑问，请关闭/重新打开 VS。最后一步是您最有可能发现智能感知在您重新启动之前无法工作的地方。

无论您是否使用非 npm 方法包含 jQuery，此方法都有效。例如，在一个项目中，我们没有使用导入、npm、js 模块，也没有使用 requireJS 来解决依赖关系。 jQuery 只是来自 html 页面的脚本标签链接。但是，我仍然可以引用 .d.ts jQuery typedefs 以获得打字稿完成/类型解析。

我可以轻松地在 package.json 中为 "jquery": "3.5.1" 添加一个依赖项来获取 jQuery 本身。

还要注意，如果 VS 工作正常，它在 package.json 中有一些缓慢的（由于网络查询）名称和版本完成提示：

【讨论】：

【解决方案12】：

这对我有用：

export var jQuery: any = window["jQuery"];

【讨论】：

这可以工作，但不会像强类型那样起作用，如果您愿意使用外部库，这将失去与 TypeScript 一起使用的好处。仍然是一个相当有趣的方法。

【解决方案13】：

安装 jquery 和 @types/jquery（作为开发依赖）后，使用此导入：

import * as $ from "jquery";

就我而言，只有这种方式才有帮助。 (角度9)

【讨论】：