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

Question

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

Script Folders

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

    <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

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 has two kinds of modules:

1. Implicitly defined as files on disk.
2. Explicitly defined by you, the coder, by saying "Even though this module is not a file on the disk, I guarantee that it exists, and here are types that it contains".

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.

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".

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 
    {
       ...
    }
    ...
}

This declaration is what the file jquery.d.ts contains. 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?

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:

/// <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.

Second, you could use tsconfig.json to specify where to look for type definitions, by specifying compilerOptions/typeRoots:

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

See full reference on tsconfig.json for more information.