blocks|key|4475263|text|在我的情况下，我不得不这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4475264|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|code-block|syntax|javascript|4475265|然后在脚本文件A.ts中|offset|length|style|CODE|4475266|import+*+as+$+from+"jquery";
...+jquery+code+...|4475267|entityMap^0|0|0|7|4|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

In my case I had to do this

<pre><code>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
</code></pre>

Then in the script file <code>A.ts</code>

<pre><code>import * as $ from "jquery";
... jquery code ...
</code></pre>

blocks|key|4475269|text|这对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4475270|export+var+jQuery:+any+=+window["jQuery"];|code-block|syntax|javascript|4475271|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This works for me:

<pre><code>export var jQuery: any = window["jQuery"];
</code></pre>

blocks|key|4475313|text|对于Angular+CLI+V7|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4475314|npm+install+jquery+--save
npm+install+@types/jquery+--save|code-block|syntax|javascript|4475315|确保jquery在angular.json+->脚本中有一个条目|4475316|...
++++"scripts":+[
++++++++"node_modules/jquery/dist/jquery.min.js"
++++]
...|4475317|转到tsconfig.app.json并在"types“中添加一个条目|4475318|{
++++"extends":+"../tsconfig.json",
++++"compilerOptions":+{
++++++++"outDir":+"../out-tsc/app",
++++++++"types":+["jquery","bootstrap","signalr"]
++++},
++++"exclude":+[
++++++++"test.ts",
++++++++"**/*.spec.ts"
++++]
}|4475319|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

For Angular CLI V7

<pre><code>npm install jquery --save
npm install @types/jquery --save
</code></pre>

Make sure jquery has an entry in angular.json -> scripts

<pre><code>...
 "scripts": [
 "node_modules/jquery/dist/jquery.min.js"
 ]
...
</code></pre>

Go to tsconfig.app.json and add an entry in "types"

<pre><code>{
 "extends": "../tsconfig.json",
 "compilerOptions": {
 "outDir": "../out-tsc/app",
 "types": ["jquery","bootstrap","signalr"]
 },
 "exclude": [
 "test.ts",
 "**/*.spec.ts"
 ]
}
</code></pre>

blocks|key|4475357|text|如果您想在web应用程序(例如React)中使用jquery，并且已经使用<script+src="jquery-3.3.1.js"...加载了jquery|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4475358|在网页上，您可以执行以下操作：|4475359|npm+install+--save-dev+@types/query
and+the+use+it+with:
let+$:+JQueryStatic+=+(window+as+any)["jQuery"];|code-block|syntax|javascript|4475360|因此，您不需要再次加载jquery+(使用npm+install+--save+jquery)，但具有Typescript的所有优点|4475361|entityMap^0|11|W|0|0|0|L|P|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

If you want to use jquery in a web application (e.g. React) and jquery is already loaded with <code>&lt;script src="jquery-3.3.1.js"...</code> 

On the webpage you can do:

<pre><code>npm install --save-dev @types/query
and the use it with:
let $: JQueryStatic = (window as any)["jQuery"];
</code></pre>

so, you don't need to load jquery a second time (with <code>npm install --save jquery</code>)
but have all the advantages of Typescript

blocks|key|4476129|text|安装jquery和@types/jquery+(作为dev依赖项)后，使用以下导入：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4476130|import+*+as+$+from+"jquery";|code-block|syntax|javascript|4476131|在我的例子中，只有这种方式是有帮助的。(angular9)|4476132|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

After installation of jquery and @types/jquery (as dev dependency), use this import:
<pre><code>import * as $ from &quot;jquery&quot;;
</code></pre>
In my case only this way was helpful.
(angular9)

I am trying 

<pre><code>$(function(){ 
 alert('Hello'); 
});
</code></pre>

Its showing this error in Visual Studio: <code>(TS) Cannot find name '$'.</code>. How can I use jQuery with TypeScript ?

How to use jQuery with TypeScript

Visual Studio

TypeScript

jQuery

我在努力$(function(){     alert('Hello'); });它在Visual Studio中显示了这个错误：(TS) Cannot find name '$'.。如何在TypeScript中使用jQuery？

问如何在TypeScript中使用jQuery
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在TypeScript中使用jQueryEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在TypeScript中使用jQuery
EN