我目前把这个放在我的“ts”文件的顶部import $ = require("jquery");
我这样做因为我试图在我的打字稿文件中使用jquery,但我似乎无法将其编译,因为它返回标题中说明了错误。我正在使用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);
};
答案 0 :(得分:6)
TypeScript有两种模块:
在您的代码中,"./DataTableSetting"
模块属于第一类,"jquery"
模块属于第二类。 TypeScript可以通过查看文件系统并发现位于那里的文件来验证DataTableSetting
模块是否存在。
但对于jquery
,TypeScript无法在磁盘上找到文件。所以它需要你的帮助。它需要您告诉它:&#34; 不要担心,TypeScript,您无法找到该文件。我将确保该模块在需要时实际存在,并且以下是它将包含的类型&#34;。
告诉TypeScript模块存在的方式,即使它不在磁盘上,通过明确声明它,如下所示:
declare module "jquery"
{
class JQueryStatic
{
...
}
...
}
此声明是文件jquery.d.ts
包含的内容。因此,您实际上并不需要自己撰写此声明。
但是,问题是: TypeScript编译器如何知道在哪里查找此声明?
实际上有两种方法可以指明声明的位置。
首先,您可以在/// <reference>
的顶部添加player-page.ts
指令,如下所示:
/// <reference path="../DefinitelyTyped/jquery.d.ts" />
这将有效地包括&#34;包括&#34; jquery.d.ts
正文中player-page.ts
的内容,从而使代码可以看到模块"jquery"
的声明。
第二次,您可以使用tsconfig.json
指定查找类型定义的位置,方法是指定compilerOptions/typeRoots
:
{
"compilerOptions": {
"typeRoots" : ["wwwroot/js/DefinitelyTyped"],
...
}
}