TypeScript, RequireJS, jQuery plugins

Question

I'm learning TypeScript, and I'm afraid I'm biting more than I can chew. I've found tutorials & examples for

having a file with string constants in a module, then using it from every ts file
configuring the compiler to create modules ready to use with RequireJS, and using the import and module keywords in TypeScript
extending jQuery interface in TypeScript, then writing the plugin code in TS

But I just can't get it working all at once.

I have 3 files, all containing separate jQuery plugins, yet sharing some constants. I have separate ts files for all pages using these. I want to reference these per-page TS files in my cshtml as <script data-main="app/this-page" type="text/javascript" src="lib/require.js"></script>, and have this-page say something like "import my plugin, then $("#someId").runMyPlugin(someSettings);"

Can anyone recommend me an approach? What should say export? what should I import? what goes in one class?

Maarten · Accepted Answer · 2015-02-13 12:19:36Z

2

After configuring require following the answer from blorkfish, the problem is to convince typescript to compile the dependency to the jquery plugin as an AMD dependency. This can be accomplished using the obscure /// <amd-dependency path="..."> directive.

Using jquery.cookie as an example, you can add this in your typescipt module:

/// <amd-dependency path="jquery.cookie">
import $ = require("jquery");
import ko = require("knockout");
export = yourmodule;

module yourmodule {
    ...
}

Which will compile into:

define(["require", "exports", "jquery", "knockout", "jquery.cookie"],
        function (require, exports, $, ko) {
    var yourmodule;
    ...
}

So now you can use the plugin in your typescript module.

answered Feb 13, 2015 at 12:19

Maarten

1,9511 gold badge15 silver badges14 bronze badges

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

Comments

user229044 · Accepted Answer · 2015-08-28 16:56:13Z

1

If your constants are defined in a class, i.e. Constants.ts

export class Constants {
   constant1: string = "firstConstant";
   constant2: string = "secondConstant";
}

then export this class, and import wherever you need it.
i.e.

import ref_Constants = module("./Constants");  
var firstConstant = ref_Constants.Constants.constant1;

Using AMD modules will then automatically load Constants.js when required.

Update Ok, so to export a plugin using require.js for JQuery, you need to export to the $ symbol:
This can only be done with require.config and the shim property. You will need something as follows:

require.config({
    baseUrl: '../',
    paths: {
        'jquery': 'lib/jquery-1.7.2',
        'myjqueryextension': 'lib/myjqueryextension' // note this is the .js file
    }, 
    shim: {
        jquery: {
            exports: '$'
        },
        myjqueryextension: {
            exports: '$'
        }
    }
});

require(['jquery','myjqueryextension'], 
    ($, myjqueryextension) => {
        // note that your extension will be attached to $ here, because of the shim
        $('#test').myExtensionFunction('foo', 'bar');
    });

The important part here is the exports: '$' line in the shim. This will attach your extension to $.

edited Aug 28, 2015 at 16:56

user229044♦

241k41 gold badges348 silver badges350 bronze badges

answered Mar 7, 2013 at 14:38

blorkfish

23.1k4 gold badges35 silver badges24 bronze badges

3 Comments

TDaver Over a year ago

yes it does. Can you give some advice on the OTHER part (typed JQuery plugins + AMD) too?

TDaver Over a year ago

well, actually, it doesn't. A module cannot be aliased to a non-module type

TDaver Over a year ago

turns out requirejs might be an overkill for my situation of 1-2 jquery plugins required here and there on a non-SPA page. Once I removed requireJS (and went back to CommonJS from AMD) everything worked as in the Typescript basic tutorials :)

AlexB · Accepted Answer · 2015-04-19 23:30:13Z

0

I was running into similar issues with setting up and AMD/RequireJS Typescript workflow. I just posted a project example on Github.

I combined Gulp, RequireJS, and Typescript without the need for shim files. It also includes a task to take Require and any vendor files, bundle them up with the app files, and produce a single minified JS file which will run the whole app. Hopefully this can help people.

https://github.com/abogartz/typescript-amd-gulp-example

answered Apr 19, 2015 at 23:30

AlexB

6952 gold badges7 silver badges15 bronze badges

Collectives™ on Stack Overflow

TypeScript, RequireJS, jQuery plugins

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related