Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Import jQuery and other 3rd Party Libraries into TypeScript as modules using AMD

Question: Is there a way to import jquery into a TypeScript module using the AMD support (via the compiler) so it includes jquery as a dependency?

The key is to get the import statement, which makes the module a dependency in the define statement (see below).

define(["require", "exports", 'dataservice', 'jquery', 'knockout'], 
    function(require, exports, __ds__, $ , ko) { 
         ...
    }
)

Details: I want to import jquery (and other 3rd party libraries) as a TypeScript modules with AMD. The goal is to make them appears as a dependency in the require list. However, the only way to make TypeScript to do this appears to be to have an import statement. And to have an import you need a module to import. But ... there is no jquery module to point to. to.

Workarounds:

  1. I can refer to the .d.ts and preload jquery in the main.js for require.js, but that means preloading all 3rd party libraries. Not terrible, but not ideal either as it doesnt take advantage of what we can already do with JavaScript and AMD.
  2. I can create a module for each 3rd party library and wrap it, but then I get something like $.$. Which is even worse, IMO (and Irisk writing the wrong module code for each of these and getting out of synch).

So for now I am just preloading jquery in the main.js. but again, but this is less than ideal. Would have to do that for any library like knockout, backbone, etc that has no module.

Any better suggestions or something I am missing?

Update/Clarification:

I can also use shims in the config for dependencies amongst the libraries. But this still preloads the 3rd party ones. Example:

require.config({
    baseUrl: '../',
    paths: {
        'jquery': 'lib/jquery-1.7.2',
        'underscore': 'lib/underscore'
    }, 
    shim: {
        jquery: {
            exports: '$'
        },
        underscore: {
            exports: '_'
        }
    }
});
like image 403
John Papa Avatar asked Dec 28 '12 16:12

John Papa


People also ask

How do I import TypeScript types?

To import a type from another file in TypeScript: Export the type from file A , e.g. export type Employee = {} . Import the type in file B as import { Employee } from './another-file'; . Use the type in file B .

Can I use JavaScript module in TypeScript?

Using an External Custom JavaScript Module For that, you can create a separate JavaScript module and can reference it in TypeScript with JSX code. Create one file named addition. js .

Is jquery a third party library?

The jimu libraries that come with Experience Builder can be used to include a variety of functionality into your widget.


1 Answers

One other work around would be use a type definition for requirejs and use your own require statements, rather than an import statement.

The downside to this is that the TypeScript import can be used with AMD or CommonJS with just a compiler change, so you would be marrying requirejs in your program more than you would be with an import.

There is an existing definition for requirejs on Definitely Typed.

like image 99
Fenton Avatar answered Oct 12 '22 03:10

Fenton