Question

我正在尝试

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

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

Answer 1

您很可能需要在项目中下载并包含jQuery的TypeScript definition file - jquery.d.ts。

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

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

npm install --save-dev @types/jquery

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

选项2：手动下载

下载here。

选项3：使用打字

如果您使用typings，则可以这样包含：

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

您的意思是需要使用--allowSyntheticDefaultImports进行编译 - 在 tsconfig.json 中添加"allowSyntheticDefaultImports": true。

Answer 2

FOR Visual Studio代码

对我来说有用的是确保我通过＆lt;来加载标准的JQuery库。 index.html中的脚本＆gt; 标记。

运行

npm install --save @types/jquery

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

Answer 3

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

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

Nuget Package Manager控制台中的命令是

Install-Package jquery.TypeScript.DefinitelyTyped

更新：正如评论中所述，此套餐自2016年以来一直未更新。但您仍可以访问https://github.com/DefinitelyTyped/DefinitelyTyped的Github页面并下载这些类型。导航库的文件夹，然后在那里下载index.d.ts文件。将它弹出到项目目录中的任何位置，VS应立即使用它。

Answer 4

就我而言，我必须这样做

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 5

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

例如。

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

如果安装了其他类型的第三方库，这也可以很好地与其他第三方库一起使用。

Answer 6

对于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 7

现在（今天）在Angular版本9上为我工作

通过npm安装：npm i @ types / jquery只需添加--save即可进行全局设置。
转到tsconfig.app.json并添加数组“类型” jquery。
ng做好事了

Answer 8

这对我有用：

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

Answer 9

这是我的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 10

如果您想在Webaplication中使用jquery（例如React），并且jquery已经在脚本上加载了脚本src =“ jquery-3.3.1.js” ...，您可以这样做：

npm install -save-dev @ types / query 并用于： let $：JQueryStatic =（任意窗口）[“ jQuery”];

因此，您无需再次加载jquery（使用npm install -save jquery）但具有Typescript的所有优势

Answer 11

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

import jQuery from '@types/jquery';

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

来源：

Answer 12

安装jquery和@types/jquery（作为开发依赖）后，使用这个导入：

import * as $ from "jquery";

就我而言，只有这种方式才有帮助。 (angular9)

如何在TypeScript中使用jQuery

12 个答案: