8

If I reference a TypeScript declarations file (ex. jquery.d.ts) using the /// <reference path="..."/> syntax, it's up to me to make sure I load the corresponding library by some other means, i.e. just referencing the .d.ts file doesn't load the library.

Is there a way to make TypeScript generate a require() call for the library when I use it? If I wasn't using AMD/requirejs I could just call require manually, but I'd like to get this to work with AMD.

The advantage of this is that my dependencies wouldn't be defined in two places. Referencing the library from a .ts file would be enough to make sure it loads, rather than having to maintain the list of dependencies manually in my HTML.

Update: I opened a new question that clarifies my exact situation. I want to give credit for the answer to my original question since I didn't give all the necessary details.

Improve this question

2 Answers 2

Reset to default
7

Yes, TypeScript supports "external" modules, which are basically first class AMD or CommonJS modules. For example:

MyLib.ts

export function foo() { return 'bar' }

MyProj.ts

import lib = module('./MyLib.ts')
lib.foo(); // returns bar

Compile this with "--module amd" and you'll get the proper module and require syntax generated for you.

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

2 Comments

Modules work great for libraries that provide functions and variables directly, but I need something similar for libraries that extend existing functionality like jQuery plugins. There's nothing to export in those, but loading them adds additional calls on the JQuery interface (defined in jquery.d.ts)
In all fairness I think your answer does apply to my original question. I just failed to fully specify my question. I'll mark this as the answer and ask a clearer question.
1

I wrote something about that on my blog. You can also find an example on GitHub.

The solution is rather long to explained, but basically I use shims with Require.JS to define a module name representing the Javascript library I want to load. I then create a TypeScript file with the same name to make the TypeScript compiler generates Javascript code that can use the JS library I want. Doesn't really makes sense like this, but please read the post and I think it will make more sense.

Improve this answer

7 Comments

Thanks for the reply. However I don't think this solves my problem. This solution still assumes that the library has at least one top-level call so that TypeScript will generate the dependency in the define call. I don't have any top-level methods or variables since these libraries are plugins that extend existing functionality. Also I don't think you really need to use shims in your example. If you just create an underscore.d.ts next to underscore.js you can import the 'libs/underscore' module and TypeScript will use the .d.ts file.
The d.ts file is only used by Typescript to determine if your code is correctly typed. Basically it's just an interface, so no code is generated by the Typescript compiler. You must provide the implementation of the Javascript library in some way. One solution is to reference a Javascript file in the html like you don't want to do. Another solution is to use AMD to load it asynchronously. That's the solution I propose.
Understood, but I still think that your solution is unnecessarily complex because of the shims.
Yes but I didn't find another simpler solution for this. Please note that this solution is good for libraries that you cannot modify like JQuery. I have seen your other question and I admit that's not exactly the case.
Why not just do import underscore = module('libs/underscore'); and have a libs/underscore.d.ts file? That way TypeScript finds the declarations and the resulting code loads underscore without having to define any aliases. Also I assume you're using an older version of underscore that supports AMD-style loading. It looks like the latest version only supports the global '_'.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.