requirejs - How do you setup a require.js config with typescript?

Question

Ok, I've been reading a lot of questions and answers about this, and a lot of it is rubbish.

I have a very simple question. How do I do the equivalent of this:

require.config({
    paths: {
        "blah": '/libs/blah/blah',
    }
}); 
require(['blah'], function(b) {
    console.log(b); 
});

In typescript?

This doesn't work:

declare var require;
require.config({
    paths: {
        "blah": '/libs/blah/blah',
    }
});
import b = require('blah');
console.log(b);

s.ts(8,1): error TS2071: Unable to resolve external module ''blah''.
s.ts(8,1): error TS2072: Module cannot be aliased to a non-module type.
error TS5037: Cannot compile external modules unless the '--module' flag is provided.

Compiling with the --module flag, with a dummy blah.ts shim compiles, but the output is:

define(["require", "exports", 'blah'], function(require, exports, b) {
    require.config({
        paths: {
            "blah": '/libs/blah/blah'
        }
    });

    console.log(b);
});

Looks like it might work, but actually no, the require.config is inside the require block, it is set after it is already needed.

SO! I've ended up so far with this as a solution:

class RequireJS {

    private _r:any = window['require'];

    public config(config:any):void {
        this._r['config'](config);
    }

    public require(reqs:string[], callback:any):void {
        this._r(reqs, callback);
    }
}

var rjs = new RequireJS();
rjs.config({
    paths: {
        "jquery": '/libs/jquery/jquery',
        "slider": '/js/blah/slider'
    }
});

rjs.require(['slider'], function(slider) {
    console.log(slider);
});

Which seems terrible.

So be clear, inside modules that depend on each other, this sort of thing works perfectly fine:

import $ = require('jquery');
export module blah {
   ...
}

I just need a proper way to setting the requirejs config at a top level, so that the imported paths for the various named modules are correct.

(...and this is because, largely, 3rd party dependencies are resolved using bower, and installed in the /lib/blah, where as the shim files I have for their definitions are in src/deps/blah.d.ts, so the default import paths are incorrect after moving the generated modules files into /js/ on the site)

NB. I've mentioned jquery here, but the problem is not that jquery doesn't work property as an AMD module; I have a shim jquery.ts.d file for this. The issue here is the requirejs paths.

Answer 1

Yesterday I wrote up a solution to this exact issue on my blog - http://edcourtenay.co.uk/musings-of-an-idiot/2014/11/26/typescript-requirejs-and-jquery:

TL;DR - create a config file config.ts that looks something like:

requirejs.config({
    paths: {
        "jquery": "Scripts/jquery-2.1.1"
    }
});

require(["app"]);

and ensure your RequireJS entry point points to the new config file:

<script src="Scripts/require.js" data-main="config"></script>

You can now use the $ namespace from within your TypeScript files by simply using

import $ = require("jquery")

Hope this helps