blocks|key|2696138|text|尝试用declare+let+$：any替换您的导入；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2696139|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Try replacing your import with 
declare let $ : any;</p>


blocks|key|2696149|text|Tim使用reference编译器指令的解决方案是有效的，但是现在有了一种更简单的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2696150|在tsconfig.json中，如果设置了typeRoots，则根本不需要在.ts文件中执行任何操作。TypeScript会为您完成这项工作。|2696151|它是如何工作的？|offset|length|style|BOLD|2696152|在我的解决方案中，我通过npm引入所有的@类型，因此这些类型被放在./node_modules/@type中。我还在./@types上手工创建了一些类型。|2696153|在我的tsconfig.json中，我添加了：|2696154|+"compilerOptions":+{+++++
+++//+lots+of+other+config+here
+++"typeRoots":+[
+++++"./node_modules/@types",
+++++"./@types"
+++]
++}|code-block|syntax|javascript|2696155|现在我的所有类型都被编译器自动发现和使用了，所以没有必要为引用标签而烦恼！|2696156|结束语...|2696157|我应该注意到，如果您这样做并尝试显式导入jquery，它将失败，并且您将感到困惑。我当然是。|2696158|entityMap^0|0|0|0|8|0|0|0|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@$F|13|G|14|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|15|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|16|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|17|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|19|8|@$F|1A|G|1B|H|I]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|Z|$]]

<p>Tim's solution using the reference compiler directive works, however there is an easier way now.</p>

<p>In tsconfig.json, if you set typeRoots, you don't need to do anything at all in your .ts files. TypeScript does the work for you.</p>

<p><strong>How does it work?</strong></p>

<p>In my solution, I pull in all my @types via npm, so those are placed at ./node_modules/@types. I also have a few types I created by hand at ./@types. </p>

<p>In my tsconfig.json, I added:</p>

<pre><code> "compilerOptions": {     
   // lots of other config here
   "typeRoots": [
     "./node_modules/@types",
     "./@types"
   ]
  }
</code></pre>

<p>Now all my types are discovered and used by the compiler automatically, so there's no need to bother with reference tags!</p>

<p><strong>In conclusion...</strong></p>

<p>I should note that if you do this and you try to explicitly import jquery, it will fail, and you will be confused. I sure was.</p>


blocks|key|26957|text|在visual+studio社区中，为了完成这项工作，我必须在html的head+/+script部分添加jquery，然后在jquery+script部分添加我的app.ts，然后在我的typescript源代码中添加对jquery+lib的引用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|26958|在html页面中，head部分：|26959|<script+src="./Scripts/jquery-3.5.1.js"></script>
<script+src="app.js"></script>|code-block|syntax|javascript|26960|在app.ts中，ts脚本的第一行：|26961|///+<reference+path+="./Scripts/typings/jquery/jquery.d.ts"/>|26962|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>In visual studio community, to do the work I have to add jquery in html at head / script section, then add my app.ts just under jquery script section then I add the reference to jquery lib in my typescript source.</p>
<p>In html page, head section :</p>
<pre><code>&lt;script src=&quot;./Scripts/jquery-3.5.1.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
</code></pre>
<p>In app.ts, first line of ts script  :</p>
<pre><code>/// &lt;reference path =&quot;./Scripts/typings/jquery/jquery.d.ts&quot;/&gt;
</code></pre>


blocks|key|2696208|text|es5|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2696209|导入非常简单，如下所示：|2696210|import+*+as+$+from+'jquery';|code-block|syntax|javascript|2696211|但前提是我们必须安装相关的.d.ts文件：|offset|length|style|CODE|2696212|npm+install+@types/jquery+--save-dev|2696213|es6|2696214|与上面相同，但如果您希望能够使用"$“作为函数，以侦听文档就绪事件(如"$(function+()+{+...+})")，则继续阅读。|2696215|首先，在tsconfig.json文件中，执行如下操作：|2696216|{
++++"compilerOptions":+{
++++++++"esModuleInterop":+true
++++}
}|2696217|然后导入时不带"*+as“部分，如：|2696218|import+$+from+'jquery';|2696219|另请参阅stackoverflow.com/Understanding-esModuleInterop|2696220|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file^0|0|0|0|D|5|0|0|0|H|1|10|M|0|4|D|0|0|8|4|0|0|4|1B|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1D|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1F|8|@$K|1G|L|1H|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|1I|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1J|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1K|8|@$K|1L|L|1M|M|N]|$K|1N|L|1O|M|N]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1P|8|@$K|1Q|L|1R|M|N]]|9|@]|A|$]]|$1|W|3|X|5|F|7|1S|8|@]|9|@]|A|$G|H]]|$1|Y|3|Z|5|6|7|1T|8|@$K|1U|L|1V|M|N]]|9|@]|A|$]]|$1|10|3|11|5|F|7|1W|8|@]|9|@]|A|$G|H]]|$1|12|3|13|5|6|7|1X|8|@]|9|@$K|1Y|L|1Z|1|20]]|A|$]]|$1|14|3|-4|5|6|7|21|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]]]

<h1>es5</h1>
<p>Importing is as simple as:</p>
<pre><code>import * as $ from 'jquery';
</code></pre>
<p>But only if we install related <code>.d.ts</code> files:</p>
<pre class="lang-sh prettyprint-override"><code>npm install @types/jquery --save-dev
</code></pre>
<h2>es6</h2>
<p>Same as above, but if you want to be able to use &quot;<code>$</code>&quot; as function, to listen for document-ready event (like &quot;<code>$(function () { ... })</code>&quot;), then continue reading.</p>
<p>First, in <code>tsconfig.json</code> file, do something like:</p>
<pre class="lang-json prettyprint-override"><code>{
    &quot;compilerOptions&quot;: {
        &quot;esModuleInterop&quot;: true
    }
}
</code></pre>
<p>Then import without &quot;<code>* as </code>&quot; part, like:</p>
<pre><code>import $ from 'jquery';
</code></pre>
<p>See also <a href="https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file">stackoverflow.com/Understanding-esModuleInterop</a></p>


<h2>Update</h2>

<p>No import was required.  Instead, I needed to add a reference to the top of the file.  So the first line of my WebAPI.js should have been <code>/// &lt;reference path ="../typings/jquery/jquery.d.ts"/&gt;</code> instead of <code>import { $ } from '../jquery-3.1.1';</code></p>

<hr>

<p>I am trying to import jQuery to use in a Typescript file, but I am receiving a variety of errors with everything I try.  I followed the solutions <a href="https://stackoverflow.com/questions/12763684/how-to-require-jquery-via-amd-in-typescript">here</a> and <a href="https://stackoverflow.com/questions/41826503/using-jquery-with-typescript-2?noredirect=1&amp;lq=1">here</a>, but without any luck.</p>

<h2>tsconfig.json</h2>

<pre><code>{
    "compilerOptions": {
        "removeComments": true,
        "preserveConstEnums": true,
    "out": "Scripts/CCSEQ.Library.js",
    "module": "amd",
        "sourceMap": true,
    "target": "es5",
    "allowJs": true
}
</code></pre>

<h2>WebAPI.js</h2>

<pre><code>import { $ } from '../jquery-3.1.1';

export class ExpenseTransaction extends APIBase {

    constructor() {
        super();
    }

    Get(): void {
        let expenses: Array&lt;Model.ExpenseTransaction&gt;;
        let self = this;
        $.ajax({
            url: this.Connection,
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            success: function (data: any): void {
                expenses = self.ConvertToEntity(data.value);
            },
            error: function (data: any): void { console.log(data.status); }
        });
    };
}
</code></pre>

<p>I have also tried <code>import * as $ from '../jquery.3.1.1'</code> </p>

<h2>Errors</h2>

<ul>
<li><code>Module jquery-3.1.1 has no exported member $</code></li>
<li><code>Property ajax does not exist on type (selector: any, context: any) =&gt; any</code></li>
</ul>


How to import JQuery into a Typescript file?

TypeScript

编译器

jQuery

更新不需要导入。相反，我需要在文件的顶部添加一个引用。所以我的WebAPI.js的第一行应该是/// <reference path ="../typings/jquery/jquery.d.ts"/>而不是import { $ } from '../jquery-3.1.1';我正在尝试导入jQuery以在Types...

问如何将JQuery导入到Typescript文件？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将JQuery导入到Typescript文件？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将JQuery导入到Typescript文件？
EN