我该如何解决错误& quot;找不到模块' jquery'& quot;在我的Typescript版本中
我目前在"ts"文件的顶部具有此代码. import $ = require("jquery"); 之所以这样做是因为我试图在我的打字稿文件中使用jquery，但是我似乎无法使其编译，因为它返回标题中所述的错误.我正在使用ASP.NET CORE
I currently have this at the top of my "ts" files 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. I am using ASP.NET CORE
脚本文件夹
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布局页面
<script data-main="~/js/lib/main" src="~/js/lib/require.js"></script>
控制台错误
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:5)
at HTMLScriptElement.onScriptError (require.js:5)
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有两种模块:
TypeScript has two kinds of modules:
- 被简单地定义为磁盘上的文件.
- 编码器由您明确定义，方法是说即使该模块不是磁盘上的文件，我也保证它存在，并且这里包含它的类型".
在您的代码中，"./DataTableSetting" 模块是第一种，而"jquery" 模块是第二种.TypeScript可以通过查看文件系统并发现其中的文件来验证 DataTableSetting 模块是否存在.
In your code, the "./DataTableSetting" module is of the first kind, and the "jquery" module is of the second kind. TypeScript can verify that the DataTableSetting module exists by looking at the file system and discovering the file sitting there.
但是对于 jquery ，TypeScript无法在磁盘上找到文件.因此，需要您的一些帮助.它需要您告诉它:" TypeScript，请不要担心，您找不到该文件.我将确保该模块在需要时确实存在，这里是其中包含的类型".
But for jquery, TypeScript cannot find a file on disk. 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:
declare module "jquery"
{
class JQueryStatic
{
...
}
...
}
此声明是文件 jquery.d.ts 包含的内容.因此，您实际上不需要自己编写此声明.
This declaration is what the file jquery.d.ts contains. So you don't actually need to write this declaration yourself.
但是，这里有一个问题: TypeScript编译器如何知道在哪里寻找该声明?
However, here is the question: how does the TypeScript compiler know where to look for this declaration?
实际上有两种方法可以指示声明的位置.
There are actually two ways to indicate where your declaration is located.
首先，您可以在 player-page.ts 的顶部包含///< reference> 指令，例如:
First, you can include a /// <reference> directive at the top of player-page.ts, like this:
/// <reference path="../DefinitelyTyped/jquery.d.ts" />
这将有效地将 jquery.d.ts 的内容包含"在 player-page.ts 的正文中，从而使此模块声明为代码可见的"jquery" .
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.
第二，您可以使用 tsconfig.json 通过指定 compilerOptions/typeRoots 指定在何处查找类型定义:
Second, you could use tsconfig.json to specify where to look for type definitions, by specifying compilerOptions/typeRoots:
{
"compilerOptions": {
"typeRoots" : ["wwwroot/js/DefinitelyTyped"],
...
}
}