我如何解决我的 Typescript 构建中的错误 "cannot find module 'jquery'"

Question

我目前在我的 "ts" 文件的顶部有这个 import $ = require("jquery"); 我这样做是因为我试图在我的打字稿文件中使用 jquery，但我似乎不能让它编译，因为它 returns 标题中指出的错误。我正在使用 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);
};

Answer 1

TypeScript 有两种模块：

隐式定义为磁盘上的文件。
由您（编码员）通过说 "Even though this module is not a file on the disk, I guarantee that it exists, and here are types that it contains" 明确定义。

在你的代码中，"./DataTableSetting"模块属于第一种，"jquery"模块属于第二种。 TypeScript 可以通过查看文件系统并发现那里的文件来验证 DataTableSetting 模块是否存在。

但是对于 jquery，TypeScript 无法在磁盘上找到文件。所以它需要你的一点帮助。它需要你告诉它：“别担心，TypeScript，你找不到文件。我会确保这个模块在需要时确实存在，这是它将包含的类型".

告诉 TypeScript 模块存在的方式，即使它不在磁盘上，也是通过显式声明它，如下所示：

declare module "jquery" 
{
    class JQueryStatic 
    {
       ...
    }
    ...
}

此声明是文件 jquery.d.ts 包含的内容。所以你实际上不需要自己写这个声明。

但是，问题来了：TypeScript 编译器如何知道在哪里寻找这个声明？

实际上有两种方法可以表明您的声明所在的位置。

首先，你可以在player-page.ts的顶部包含一个/// <reference>指令，像这样：

/// <reference path="../DefinitelyTyped/jquery.d.ts" />

这将在 player-page.ts 的主体中有效地 "include" jquery.d.ts 的内容，从而使模块 "jquery" 的声明对代码可见。

其次，您可以使用tsconfig.json指定查找类型定义的位置，方法是指定compilerOptions/typeRoots:

{
   "compilerOptions": {
       "typeRoots" : ["wwwroot/js/DefinitelyTyped"],
       ...
   }
}

See full reference on tsconfig.json for more information.

我如何解决我的 Typescript 构建中的错误 "cannot find module 'jquery'"

How do i solve error "cannot find module 'jquery'" in my Typescript build

javascript

jquery

requirejs

typescript

asp.net-core