如何在TypeScript中使用jQuery

Question

我在尝试

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

它在Visual Studio中显示此错误:(TS) Cannot find name '$'..如何在TypeScript中使用jQuery？

Answer 1

您很可能需要在项目中下载并包含jQuery- 的TypeScript定义文件jquery.d.ts.

选项1:安装@types包(推荐用于TS 2.0+)

在与package.json文件相同的文件夹中,运行以下命令:

npm install --save-dev @types/jquery

然后编译器将自动解析jquery的定义.

选项2:手动下载

在这里下载.

选项3:使用打字

如果你正在使用打字,那么你可以这样包括它:

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

你的意思是需要在tsconfig.json中使用--allowSyntheticDefaultImports-add 进行编译."allowSyntheticDefaultImports": true

Answer 2

对于Visual Studio代码

对我有用的是确保我通过index.html中的<script>标签加载标准JQuery库.

跑

npm install --save @types/jquery

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

Answer 3

就我而言,我必须这样做

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 ...

Answer 4

我相信你可能需要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应该立即使用它.

Answer 5

对于Angular CLI V7

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"
]
}

Answer 6

您需要在Component中声明jquery/ $,如果tsLint为On,则表示这些类型的Type Checkings.

对于Eg.

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

如果安装了他们的打字,这对其他第三方库也很有效.

Answer 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 !')
    }
}

真是丝滑啊！！！

Answer 8

您可以通过扩展窗口接口来声明全局变量：

import jQuery from '@types/jquery';

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

资料来源：

• /sf/answers/889691631/
• https://mariusschulz.com/blog/declaring-global-variables-in-typescript#augmenting-the-window-interface

Answer 9

如果您想在 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 的所有优点

Answer 10

这对我来说现在和今天在 Angular 版本 9 中都有效

1. 通过 npm 安装： npm i @types/jquery 只需将 --save 添加到全局设置中。
2. 转到 tsconfig.app.json 并添加数组“types”jquery 。
3. 服务完成。

Answer 11

我在 ASP.Net core 项目中使用 VS 2019 的过程。因此，我不必摆弄 npm 命令行实用程序，而是使用 npm 配置文件采取声明性方法。

1. 您的项目根目录中有 package.json （npm 依赖项配置）吗？

   • 如果没有，右键项目 -> 添加 -> 新项目 -> (搜索 npm) 选择npm Configuration File并保留默认文件名package.json

2. 在 devDependencies 下添加一个条目。这告诉 npm 安装“@types/jquery”，这是由 DefinelyTyped 维护的 npm 包。这与其他答案中显示的 npm install 命令本质上相同。

   "devDependencies": {
     "@types/jquery": "3.5.1"
   }
   

3. 据说保存文件后，这应该会触发 npm 软件包安装。我发现我必须右键单击 package.json 文件，然后单击“恢复包”（项目处于调试模式时未显示选项）。

   • 第一次运行 npm Restore 时，您应该切换到“输出”选项卡/窗口并将下拉列表更改为“npm”以验证没有错误。

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

5. 打开您自己的打字稿文件，然后将 index.d.ts 从解决方案资源管理器拖动到打开的打字稿文件的第一行。这应该添加在顶部（相对路径将根据您的打字稿文件的位置而变化）：

   /// <reference path="../node_modules/@types/jquery/index.d.ts" />
   

6. 现在，如果您开始在打字稿文件的函数内编写代码，您应该能够输入jQue并获得智能感知完成提示。

注意：最近 VS 非常糟糕，直到重新启动后才能正确反映各种更改，尤其是涉及键入错误和智能感知的内容。您甚至可以在 MS 官方文档中经常看到他们提到需要重新启动才能解决红色波浪线等问题。因此，如有疑问，请关闭/重新打开 VS。最后一步是您最有可能发现智能感知在重新启动之前无法工作的地方。

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

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

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