我在努力

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

在Visual Studio中显示此错误:(TS)无法找到名称“$”..我如何使用jQuery与TypeScript ?


当前回答

我的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查询)名称和版本完成提示:

其他回答

很可能你需要下载并包含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

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

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

Nuget Package Manager Console中的命令为

Install-Package jquery.TypeScript.DefinitelyTyped

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

在安装jquery和@types/jquery(作为dev依赖项)后,使用以下导入:

import * as $ from "jquery";

对我来说,只有这样才有用。 (angular9)

步骤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!");
  });
}, []);

我的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查询)名称和版本完成提示: