Typescript 和 JQuery 编译错误：找不到名称“$”

Posted 2023-03-13

【中文标题】Typescript 和 JQuery 编译错误：找不到名称“$”

【英文标题】：Typescript and JQuery compile error: Cannot find name '$'

【发布时间】：2016-11-12 00:01:51

【问题描述】：

我正在用 jquery 测试 typescript，但是当我编译 test.ts 文件时，它总是给我一个错误提示：找不到名称'$'。

我已经导入了 jquery 并添加了它的定义参考。 如果我在我的test.ts 文件中使用import $ = require("jquery")，在进行tsc 编译时会出现另一个错误“Cannot find module jquery”。但是，JQuery 文件夹已经存在于 node_modules 文件夹中。

有谁知道在 typescript 中使用 jquery 的正确方法是什么？

以下是我的步骤：

使用npm install jquery --save安装jquery 使用 typings install --global --save dt~jquery 安装类型和 jquery 定义 在 test.ts /// <reference path="../../../typings/globals/jquery/index.d.ts" /> 顶部添加 jquery 引用

tsconfig.json

    "compilerOptions": 
        "jsx": "react",
        "outDir": "./dist",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "experimentalDecorators": true
    ,
    "exclude": [
        "node_modules"
    ],
    "files": [
        "./typings/index.d.ts",
        "./src/wo/tests/test.ts",
    ]

test.ts

/// <reference path="../../../typings/globals/jquery/index.d.ts" />

let test:any=$("div");

【问题讨论】：

如何编译项目？此外，您的 tsconfig.json 定义似乎是错误的。你不能同时使用exclude 和files（files 在这种情况下会获胜，所以路径可能是错误的）。如果使用了tsconfig.json，你也不需要/// <reference

您可以参考下面的链接了解此解决方案的使用 $ 并查询打字稿中的所有功能。链接：c-sharpcorner.com/article/typescript-with-jquery

【参考方案1】：

我不知道它是否有帮助，但我为我的日期选择器解决了同样的问题。

首先我用这个命令安装了 jQuery：npm install --save-dev @types/jquery

然后在你的 angular-cli.json 文件中添加依赖：

"styles": [
            "../node_modules/bootstrap/dist/css/bootstrap.css",
            "../node_modules/font-awesome/css/font-awesome.css",
            "../node_modules/ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker3.min.css",
            "styles.css"
        ]

"scripts": [
            "../node_modules/jquery/dist/jquery.js",
            "../node_modules/ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js"
        ]

我认为添加 jQuery 部分可能对您有用。请让我知道它是否有效。

【讨论】：

npm install --save-dev @types/jquery 解决了这个问题。谢谢。

只有结合import * as $ from 'jquery';才能解决我的问题。

在 Angular 6 中，angular-cli.json 变成了 angular.json，但我不需要修改脚本部分。只需 npm install --save-dev @types/jquery 和 import * as $ from 'jquery'; 就足以构建

【参考方案2】：

如果你在 90% 的情况下发现这些错误是因为 @types/jquery 的版本控制问题

尝试运行：

 npm install jquery --save

然后在app.module.ts：

import * as $ from 'jquery';

然后运行：

  npm install @types/jquery@2.0.47

你应该准备好了。

【讨论】：

这对我有用，尽管我必须将 jquery 放在像 import * as $ from "jquery"; 这样的字符串中。 IntelliJ 将其灰色突出显示为未使用的导入，但应用程序将仅使用此行编译。

最后一步是我需要jquery@3.3.1

您好@Ignatius Andrew，它有效，但我收到了一些警告，例如app/app.module.ts[14, 13]: Unused import: '$'

Praveen Kumar.. 将自定义类型添加到 '$' 作为类型 'any'，它应该消失。

【参考方案3】：

安装并导入以下包。它将解决错误（“找不到名称'$'”）。 Angular 版本是 7

导入'datatables.net'；

【参考方案4】：

您可能有一些需要修复的漏洞。

运行npm audit fix 修复它们，或运行npm audit 了解详细信息。

【参考方案5】：

import * as $ from "jquery";

对我不起作用。够有趣的，

import  ajax, css  from "jquery";

实际上解决了我的问题。