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:

Answer 1

This post is 3 years old, and there's a lot of changes that have been made when using Typescript. Anyway, after some search on the web,some research on TS documentation-these guys made some good job, I found something that could help. so this can apply to the latest current of TS (2.2.1) you probably know that you can use

npm install --save @types/jquery

do the same for your 3rd party JS librairies such as require now you need to define what your TypeScript Compiler has to do, and how, so create a tsconfig.json file that contains:

// tsconfig.json file
{
   "compilerOptions": {
   "allowJs": true,
   "baseUrl": "./Scripts",//Same as require.config
   "module": "amd",
   "moduleResolution": "Node",//to consider node_modules/@types folders
   "noImplicitAny": false,
   "target": "es5", // or whatever you want
   "watch": true
}

now, let's focus on require's configuration

// require-config.ts
declare var require: any;
require.config({
   baseUrl: "./Scripts/",
   paths: {
      "jquery": "vendor/jquery/jquery.x.y.z"
      // add here all the paths your want
      // personnally, I just add all the 3rd party JS librairies I used
      // do not forget the shims with dependencies if needed...
   }
});

so far so good now focus on your module written in TS that would use jquery and that is located in Scripts/Module folder:

// module/blah.ts
/// 
import $ = require("jquery");
export function doSomething(){
    console.log("jQuery version :", $.version);
}

So this answer looks the same as Ed Courtenay's, doesn't it? and user210757 mentioned that it does NOT work!!! and it does not! if you type in your console tsc -w --traceResolution, you'll see that tsc cannot find any definition for jquery here's how to alleviate assuming you previously launchnpm install --save @types/jquery` by doing this, in a folder named node_modules\@types , you should get the TS definition for jquery

• select the package.json file in jquery subfolder
• look for the "main" property

• set it to "jquery", the same as the alias you are using in your require.config and done! your module would be transpiled as

  define("module/blah", ["require", "exports", "jquery"], function (require, exports, $) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     function doSomething() {
       console.log("jQuery version:", $.fn.jQuery);
     }
     exports.doSomething = doSomething;
  });
  

and that JS code looks good to me! I just don't like the fact that our module dependencies list "require" & "exports", that sounds like a TS issue, but anyway IT WORKS!