如何在我的Typescript构建

时间:2016-12-16 17:52:11

标签: javascript jquery typescript asp.net-core requirejs

我目前把这个放在我的“ts”文件的顶部import $ = require("jquery");我这样做因为我试图在我的打字稿文件中使用jquery,但我似乎无法将其编译,因为它返回标题中说明了错误。我正在使用ASP.NET CORE

脚本文件夹

enter image description here

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);
};

1 个答案:

答案 0 :(得分:6)

TypeScript有两种模块:

  1. 隐式定义为磁盘上的文件。
  2. 由您,编码员明确定义,并说&#34;即使此模块不是磁盘上的文件,我保证它存在,并且这里包含的类型&#34;。
  3. 在您的代码中,"./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"],
           ...
       }
    }
    

    See full reference on tsconfig.json for more information