如何在TypeScript中使用jQuery

我在尝试

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

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

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

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

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

npm install --save-dev @types/jquery

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

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

在这里下载。

选项3：使用键入内容（TS 2.0之前的版本）

如果您使用的是打字，则可以通过以下方式添加：

// 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添加进行编译"allowSyntheticDefaultImports": true。

还安装软件包？

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

npm install --save jquery

就我而言，我必须这样做

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

对于 Visual Studio代码

对我有用的是确保我通过<脚本>进行标准的JQuery库加载 index.html中标记。

跑

npm install --save @types/jquery

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

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

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

更新2019：

David的回答更为准确。

Typescript使用DefinitelyTyped Repo支持第三方供应商库，后者不使用Typescript进行库开发。

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

例如

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

如果您想在Web应用程序中使用jquery（例如React），并且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的所有优点

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

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

第一：

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

柔滑如丝！

Angular 9现在和今天都可以使用此功能

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

这对我有用：

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