Avoid duplicate reference / import of external javascript library in Typescript when using AMD modules

Question

Lets say I am using --module AMD to get AMD module support with Typescript and use requirejs. Now, using the jquery.ts.d from DefinetelyTyped I came up with the following minimal example:

/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require("jquery");

export class Greeter
{
    sayHello() {
       $('#mydiv').text('hello world');
    }
}

One can clearly see that I have to reference jQuerytwo times: One time via the ///<reference ... /> statement and one time via the import jquery = require("jquery") statement.

Now, if I omit the ///<reference ... /> part, the typescript compiler tsc will complain about the unknown $variable. On the other hand, if I leave out the import statement, compilation will work but at runtime jQuerywill not be included (as it is not in the list of required components in the compiled sourcecode).

So the only way I see is to always include both statements, which feels wrong to me as I am repeating myself. I this the "expected way"(TM) or am I just missing something here?

Can you conditionally import jquery?

Travis J
– Travis J

2014-05-15 21:14:03 +00:00
Commented May 15, 2014 at 21:14 — Travis J
– Travis J, Commented May 15, 2014 at 21:14
What do you mean by that?

Dynalon
– Dynalon

2014-05-15 21:32:49 +00:00
Commented May 15, 2014 at 21:32 — Dynalon
– Dynalon, Commented May 15, 2014 at 21:32

basarat · Accepted Answer · 2014-05-16 02:09:53Z

3

I recommend adding a vendor.d.ts file that consolidates all your external definitions like :

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

And then you only reference vendor.d.ts :

/// <reference path="../../typings/vendor.d.ts" />
import $ = require("jquery");

BTW, if you are using tsd https://github.com/DefinitelyTyped/tsd it creates a tsd.d.ts file for you that plays the role of vendor.d.ts

answered May 16, 2014 at 2:09

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dynalon Over a year ago

Didn't know about tsd.d.ts, best answer so far! However I still have the trouble of remembering to perform an import $ = require('jquery'); (and similiar for knockout, underscore, ...) in every .ts file I used - if I forget it, compilation succeeds but there might be runtime errors

Dynalon Over a year ago

Btw. I found out how to make sure not to forget the import statement: I now only use external modules, and either I export a single class per file (=external module) using the export = <ClassName> syntax (see here) or when exporting multiple classes from a file (=external module) by aliasing them via import MyClass = modulename.MyClass

Ryan Cavanaugh · Accepted Answer · 2014-05-15 21:12:54Z

0

If you have a file called jquery.d.ts in the same path, and that file is written with a top-level export (instead of a declare module "jquery" {), then you don't need the reference tag.

You could also pass all of your .d.ts files as explicit arguments to tsc

Otherwise, there's no way for the compiler to know where to find type information about the jQuery module.

answered May 15, 2014 at 21:12

Ryan Cavanaugh

223k59 gold badges280 silver badges235 bronze badges

2 Comments

Dynalon Over a year ago

Well the .d.ts come via DefinetelyTyped and are not in the same path as jquery.

Dynalon Over a year ago

Well I'd rather get rid of the import statement. Missing the reference statement at compile time will result in an error, missing the import statement will only produce an error at runtime, which is more error-prone IMHO

Collectives™ on Stack Overflow

Avoid duplicate reference / import of external javascript library in Typescript when using AMD modules

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related