步骤1。 我使用的是yarn，你可以安装jQuery & jQuery的类型下面的cmd。

yarn add jquery
yarn add @types/jquery -D

步骤2 在你的tsx文件中添加

import jquery from 'jquery';
const $: JQueryStatic = jquery;

步骤3: 你可以把jQuery添加到react组件中。

useEffect(() => {  
  $(() => {
    console.log("Hello JQuery!");
  });
}, []);

对于Visual Studio代码

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

Run

npm install --save @types/jquery

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

下面是我的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 !')
    }
}

它像丝一样光滑!!

很可能你需要下载并包含jQuery-jquery.d的TypeScript声明文件。在你的项目里。

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

和你的包放在同一个文件夹里。Json文件，执行如下命令:

npm install --save-dev @types/jquery

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

选项2:手动下载(不推荐)

在这里下载。

选项3:使用类型(Pre 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 - add "allowSyntheticDefaultImports": true来编译。

还要安装软件包?

如果你没有安装jquery，你可能想通过npm将它作为依赖项安装(但并不总是这样):

npm install --save jquery

这对我来说很管用:

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

我的VS 2019程序在ASP。Net核心项目。因此，我不需要在npm命令行工具上瞎折腾，而是使用npm配置文件采取声明性的方法。

Do you have a package.json (npm dependencies config) in the root of your project? If no, right click project -> Add -> New item -> (Search npm) Select npm Configuration File and keep default filename package.json Add an entry under devDependencies. This tells npm to install "@types/jquery" which is a npm package maintained by DefinitelyTyped. This is essentially the same as the npm install command shown in other answers. "devDependencies": { "@types/jquery": "3.5.1" } Supposedly upon saving the file this should trigger the npm package install. I find I have to right click the package.json file and click Restore Packages (option not shown while project is in debug mode). The first time you run npm restore, you should switch to the Output tab/window and change dropdown to "npm" to verify there were no errors.

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

打开您自己的typescript文件，并将index.d.ts从解决方案资源管理器拖到所打开的typescript文件的第一行上。这应该添加在顶部(相对路径将根据你的typescript文件的位置而变化): /// <引用路径="../node_modules/@types/jquery/index.d. "ts " / > 现在，如果你开始在typescript文件的函数中编写代码，你应该能够输入jQue并得到智能感知完成提示。

注意:最近的VS在重新启动之前没有正确地反映各种更改，特别是涉及到键入错误和智能感知的事情。你可以经常看到，甚至在官方的微软文档中，他们提到需要重新启动来解决红色曲线。因此，当有疑问时，关闭/重新打开VS.最后一步是你最可能发现智能感知在重新启动之前无法工作的地方。

不管你是否使用非npm方法包含jQuery，这个方法都有效。例如，在一个项目中，我们不使用导入、npm、js模块，也不使用requireJS来解析依赖项。jQuery只是html页面上的一个脚本标签链接。但是，我仍然可以引用。d。jQuery typedefs，以获得typescript完成/类型解析。

我可以很容易地在包中添加依赖项。jquery:“3.5.1”来获取jquery本身。

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