我在努力
$(function(){
alert('Hello');
});
在Visual Studio中显示此错误:(TS)无法找到名称“$”..我如何使用jQuery与TypeScript ?
我在努力
$(function(){
alert('Hello');
});
在Visual Studio中显示此错误:(TS)无法找到名称“$”..我如何使用jQuery与TypeScript ?
当前回答
下面是我的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
下面是我的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 !')
}
}
它像丝一样光滑!!
对于Visual Studio代码
对我来说有用的是确保我通过index.html中的< script >标记来加载标准的JQuery库。
Run
npm install --save @types/jquery
现在JQuery $函数在所有.ts文件中都可用,不需要任何其他导入。
对于Angular CLI V2+
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年更新:
大卫的回答更准确。
Typescript支持第三方供应商库,这些库不使用Typescript进行库开发,使用DefinitelyTyped Repo。
你需要在你的组件中声明jquery/$,如果这些类型的类型检查tsLint是On的。
如。
declare var jquery: any;
declare var $: any;