[英]How do i solve error “cannot find module 'jquery'” in my Typescript build
I currently have this at the top of my "ts" files import $ = require("jquery");
我目前在我的“ ts”文件的顶部有这个。import
import $ = require("jquery");
I am doing this because I am trying to use jquery in my typescript files, but i cant seem to get it to compile because it returns the error stated in the title. 我这样做是因为我试图在我的打字稿文件中使用jquery,但是我似乎无法使其编译,因为它返回标题中所述的错误。 I am using ASP.NET CORE
我正在使用ASP.NET CORE
Script Folders 脚本文件夹
tsonfig.json tsonfig.json
{
"compilerOptions": {
"noImplicitAny": true,
"noEmitOnError": true,
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"target": "es5",
"module": "umd"
},
"files": [
"wwwroot/js/player-page.ts",
"wwwroot/js/playerDetails-page.ts",
"wwwroot/js/DataTableSetting.ts"
],
"compileOnSave": true
}
main.ts 主要
require.config({
baseUrl: "wwwroot/js/lib",
paths: {
jquery: "jquery-3.1.1"
}
});
require(["jquery", "DataTable", "DataTableSetting"],
($: JQueryStatic, datatable: DataTables.DataTable, dataTableSetting: any) => {
console.log($);
});
ASP.NET MVC Layout Page ASP.NET MVC布局页面
<script data-main="~/js/lib/main" src="~/js/lib/require.js"></script>
Console Error 控制台错误
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:5)
at HTMLScriptElement.onScriptError (require.js:5)
TS file TS文件
import $ = require("jquery");
import DataTables = require("./DataTableSetting");
export class Player {
private playerTable: HTMLTableElement;
constructor(playerTable: HTMLTableElement) {
this.playerTable = playerTable;
this.wireEvents(this.playerTable);
}
initDatatable(playerTable: HTMLTableElement) {
$(playerTable).DataTable();
}
private wireEvents(playerTable: HTMLTableElement): void {
const btnsUpdatePlayer = playerTable.querySelectorAll(".btnUpdatePlayer");
Array.prototype.forEach.call(btnsUpdatePlayer,
(btn: HTMLButtonElement) => {
btn.addEventListener("click", (e : Event)=> {
console.log(e.target);
}, false);
});
}
}
window.onload = () => {
var $dtPlayerTable = document.getElementById("tblPlayer");
var playerTable: HTMLTableElement = <HTMLTableElement>$dtPlayerTable;
const player = new Player(playerTable);
};
TypeScript has two kinds of modules: TypeScript具有两种模块:
In your code, the "./DataTableSetting"
module is of the first kind, and the "jquery"
module is of the second kind. 在您的代码中,
"./DataTableSetting"
模块是第一种,而"jquery"
模块是第二种。 TypeScript can verify that the DataTableSetting
module exists by looking at the file system and discovering the file sitting there. TypeScript可以通过查看文件系统并发现其中的文件来验证
DataTableSetting
模块是否存在。
But for jquery
, TypeScript cannot find a file on disk. 但是对于
jquery
,TypeScript无法在磁盘上找到文件。 So it needs a little help from you. 因此需要您的一些帮助。 It needs you to tell it: " Don't worry, TypeScript, that you can't find the file. I will make sure that this module actually exists when needed, and here are the types that it will contain ".
它需要您告诉它:“ 不用担心,TypeScript,您找不到文件。我将确保此模块在需要时确实存在,并且这里将包含该类型 ”。
The way you tell TypeScript that a module exists, even though it's not on disk, is by declaring it explicitly, like this: 告诉TypeScript模块存在的方法(即使它不在磁盘上)是通过显式声明的,如下所示:
declare module "jquery"
{
class JQueryStatic
{
...
}
...
}
This declaration is what the file jquery.d.ts
contains. 此声明是文件
jquery.d.ts
包含的内容。 So you don't actually need to write this declaration yourself. 因此,您实际上不需要自己编写此声明。
However, here is the question: how does the TypeScript compiler know where to look for this declaration? 但是,这里有一个问题: TypeScript编译器如何知道在哪里寻找该声明?
There are actually two ways to indicate where your declaration is located. 实际上有两种方法可以指示声明的位置。
First , you can include a /// <reference>
directive at the top of player-page.ts
, like this: 首先 ,您可以在
player-page.ts
顶部包含/// <reference>
指令,如下所示:
/// <reference path="../DefinitelyTyped/jquery.d.ts" />
This will effectively "include" the contents of jquery.d.ts
in the body of player-page.ts
, thus making this declaration of module "jquery"
visible to the code. 这将有效地“包括”内容
jquery.d.ts
在体内player-page.ts
,从而使模块的这一声明"jquery"
到代码可见。
Second , you could use tsconfig.json
to specify where to look for type definitions, by specifying compilerOptions/typeRoots
: 其次 ,您可以使用
tsconfig.json
通过指定tsconfig.json
来指定查找类型定义的compilerOptions/typeRoots
:
{
"compilerOptions": {
"typeRoots" : ["wwwroot/js/DefinitelyTyped"],
...
}
}
See full reference on tsconfig.json
for more information . 有关更多信息,请参见
tsconfig.json
完整参考 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.