如何在 TypeScript 中使用 jQuery

How to use jQuery with TypeScript

提问by JavaScript Linq

I am trying

我在尝试

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

Its showing this error in Visual Studio: (TS) Cannot find name '$'.. How can I use jQuery with TypeScript ?

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

回答by David Sherret

Most likely you need to download and include the TypeScript declaration filefor jQuery—jquery.d.ts—in your project.

您很可能需要下载jQuery的TypeScript 声明文件并将其包含在jquery.d.ts您的项目中。

Option 1: Install the @types package (Recommended for TS 2.0+)

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

In the same folder as your package.jsonfile, run the following command:

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

npm install --save-dev @types/jquery

Then the compiler will resolve the definitions for jquery automatically.

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

Option 2: Download Manually (Not Recommended)

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

Download it here.

在这里下载。

Option 3: Using Typings (Pre TS 2.0)

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

If you're using typingsthen you can include it this way:

如果你使用的分型，那么你可以包括这样说：

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

---

---

After setting up the definition file, import the alias ($) in the desired TypeScript file to use it as you normally would.

设置定义文件后，$在所需的 TypeScript 文件中导入别名 ( ) 以像往常一样使用它。

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

You may need to compile with --allowSyntheticDefaultImports—add "allowSyntheticDefaultImports": truein tsconfig.json.

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

Also Install the Package?

还要安装软件包？

If you don't have jquery installed, you probably want to install it as a dependency via npm (but this is not always the case):

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

npm install --save jquery

回答by Shobi

In my case I had to do this

就我而言，我必须这样做

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

Then in the script file A.ts

然后在脚本文件中 A.ts

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

回答by Sydwell

FOR Visual Studio Code

对于Visual Studio 代码

What works for me is to make sure I do the standard JQuery library loading via a < script >tag in the index.html.

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

Run

跑

npm install --save @types/jquery

Now the JQuery $ functions are available in all .ts files, no need of any other imports.

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

回答by Licht

I believe you may need the Typescript typings for JQuery. Since you said you're using Visual Studio, you could use Nuget to get them.

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

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

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

The command in Nuget Package Manager Console is

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

Install-Package jquery.TypeScript.DefinitelyTyped

Update:As noted in the comment this package hasn't been updated since 2016. But you can still visit their Github page at https://github.com/DefinitelyTyped/DefinitelyTypedand download the types. Navigate the folder for your library and then download the index.d.tsfile there. Pop it anywhere in your project directory and VS should use it right away.

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

回答by The One

For Angular CLI V7

对于 Angular CLI V7

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

Make sure jquery has an entry in angular.json -> scripts

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

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

Go to tsconfig.app.json and add an entry in "types"

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

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

回答by Subroto

UPDATE 2019:

2019 年更新：

Answer by David, is more accurate.

大卫的回答，更准确。

Typescript supports 3rd party vendor libraries, which do not use Typescript for library development, using DefinitelyTyped Repo.

Typescript 支持 3rd 方供应商库，这些库不使用 Typescript 进行库开发，而是使用 DescribeTyped Repo。

---

---

You do need to declare jquery/$in your Component, If tsLint is On for these types of Type Checkings.

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

For Eg.

对于例如。

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

回答by Gerhard Friedrich

If you want to use jquery in a web application (e.g. React) and jquery is already loaded with <script src="jquery-3.3.1.js"...

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

On the webpage you can do:

在网页上，您可以执行以下操作：

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

so, you don't need to load jquery a second time (with npm install --save jquery) but have all the advantages of Typescript

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

回答by Lancer.Yan

Here is my TypeScript & jQuery config steps.

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

It makes jQuery's types support to work better than the most articles in the internet. ( I believe. )

它使 jQuery 的类型支持比 Internet 上的大多数文章都更好地工作。（ 我相信。 ）

first:

第一的：

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

second( very very very important ! ! ! ):

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

import jquery = require("jquery");



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

then , You Can Enjoy It :

然后，你可以享受它：

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

It's silky smooth !!!

很丝滑！！！

回答by Salar

This works for me:

这对我有用：

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