Using TypeScript With jQuery Without AMD?

Question

Is it possible to use TypeScript and jQuery (or any other non-Node JavaScript library) without AMD?

Currently my code compiles fine, but the compiled code cannot see the jQuery's $ function.

Given this TypeScript code:

/// <reference path="typings/tsd.d.ts" />
import $ = require('jquery');

export class Widget {
  foo() { 
    $(selector).bar()
  }
}

I'd like the following JavaScript:

var Widget = (function ($) {
  function Widget() { }
  Widget.prototype.foo = function () { ... };
  return Widget;
})(jQuery);

Currently my code does not have jQuery passed to the anonymous function.

UPDATE 1

Per @basarat

Do it by hand. If its valid JavaScript then its valid TypeScript

You're suggesting (and I was thinking) that I do this:

var Widget = (function($) {
  class Widget {
    foo() {
      $('body').append('foo');
    }
  }
  return Widget;
})(jQuery);

?

That's not valid TypeScript and without that, I'm left with prototypes.

UPDATE 2

Per @basarat the above is supported with TypeScript 1.6.

I know I can do this by hand. I want to know if there's a TypeScript way to do this. — DBagBaggerWithSwagger
– DBagBaggerWithSwagger, Commented Sep 20, 2015 at 23:20

basarat · Accepted Answer · 2015-09-21 00:35:47Z

2

Given this TypeScript code , I'd like the following JavaScript

This is not how the TypeScript js emit is designed to work.

So in short : no. You can't get this javascript from that typescript.

I know I can do this by hand. I want to know if there's a TypeScript way to do this.

Do it by hand. If its valid JavaScript then its valid TypeScript. There isn't a specific TypeScript way to do this thing. The JavaScript way is the TypeScript way in this case.

Update

That's not valid TypeScript and without that, I'm left with prototypes.

It is valid TypeScript starting with TypeScript 1.6.

edited Sep 21, 2015 at 0:35

answered Sep 20, 2015 at 23:23

basarat

278k60 gold badges475 silver badges528 bronze badges

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

4 Comments

DBagBaggerWithSwagger Over a year ago

Checkout the update to my question. Looks like to do it by hand I loose class, interface, etc... keywords

basarat Over a year ago

See update. It should work starting with typescript 1.6

DBagBaggerWithSwagger Over a year ago

Yup, 1.6 works. Do you know if this was added to 1.6 to support this problem?

basarat Over a year ago

This as well as others. More important was anonymous classes (e.g. class expressions) and inner classes.

Collectives™ on Stack Overflow

Using TypeScript With jQuery Without AMD?

UPDATE 1

UPDATE 2

1 Answer 1

Update

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE 1

UPDATE 2

1 Answer 1

Update

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related