CODEWITHSUNDEEP
javascriptjqueryrequirejstypescriptvisual-studio-2015
AxD
AxD

Reputation: 3158

How do I reference modules in TypeScript correctly?

I absolutely don't understand how the module path is to be provided for imports to work.

Most of the time while I'm editing TypeScript in Visual Studio 2015 I'm getting a red squiggly line and an error message telling me that module "x" could not be found. But there is no IntelliSense or whatsoever for creating the correct module name helping me in finding the right name to add to the require call.

Here's my problem: I'm writing code that's been used by different HTML pages residing in different directories. Parts of my TypeScript code also resides in separate directories.

So how am I supposed to reference all the different TypeScript/JavaScript libraries from within TypeScript code for it to work correctly in the end? How do I address it in TypeScript and how do I address it later when it's been called from within one of my HTML pages?

And how is jQuery supposed to fit into all this? The only way to reference jQuery is by writing:

import $ = require("jquery");

But there is no such file with that name in my project. But any other term I'm using (e.g. "../../Scripts/jquery-2.1.4") brings back the red squiggly line again. So how's this all supposed to load at run-time?

I already read How to Use RequireJS with jQuery and RequireJS Configuration options, but I still don't understand.

It becomes particularly hard to understand when it comes to deploying things. Because then I'll be using ".min.js" files, residing in yet another directory.

Upvotes: 2

Views: 842

Answers (1)

Artem
Artem

Reputation: 1870

When you write:

import $ = require("someModule");

TypeScript examines file existing only if it is a TypeScript file. For JavaScript libs you should add definition file to your project, manually or via NuGet (e.g. JQuery.d.ts)

Unfortunately TypeScript does not support relative paths (e.g. ../../Scripts/jquery-2.1.4) for ambient modules, so you should map modules that located in different paths:

require.config({
    paths: {
        "jquery": "Scripts/jquery-2.1.4"
    }
    ...
}

For deploying you can use RequireJS Optimizer.

Actually it is not necessary to use RequireJS (AMD modules). You can use internal modules (i.e. module system "None"). With that import = require is not needed. You should just reference scripts in your HTML in proper order, from required to dependent.

Update: If you still want to use relative paths with RequireJS, you should move jquery.d.ts next to actual jquery.js file and at the end of file change module declaration from:

declare module "jquery" {
    export = $;
}

to just:

export = $;

Upvotes: 1

Related Questions