Typescript equivalent to JS Module pattern

Question

I'm using the JS Module pattern (as described in this post), and I have code that looks like this:

Foo = (function($, ko) {

    //Constructor for Foo
    var Foo = function () {
        //Uses $ and ko
    };
    return Foo;

})($, ko)

I want to convert this pattern to a TypeScript equivalent, but I'm not sure what that would be. Do I replace the whole IIFE with this?

 class Foo {
     constructor() {
         //Uses $ and ko
     }
 }

That seems roughly equivalent, but then it loses the explicit injection of my dependencies. Is this the way to do this in TypeScript?

Ezward · Accepted Answer · 2014-11-29 22:28:20Z

1

Typescript is a superset of JavaScript, so your JavaScript code is valid TypeScript. The code below compiles to the exact same JavaScript;

var $, ko;
var Foo = (function($, ko) {

    //Constructor for Foo
    var Foo = function () {
        //Uses $ and ko
    };
    return Foo;

})($, ko)

var theFoo = new Foo();

Alternatively, if you want to use TypeScript classes, you can pass values to the constructor in TypeScript;

var $, ko;
class Foo {
    constructor($, ko) {
     //Uses $ and ko
    }
}

var theFoo = new Foo($, ko);

Produces this Javascript:

var $, ko;
var Foo = (function () {
    function Foo($, ko) {
        //Uses $ and ko
    }
    return Foo;
})();
var theFoo = new Foo($, ko);

That is not directly equivalent to your original code, but it may serve the purpose.

answered Nov 29, 2014 at 22:28

Ezward

17.8k6 gold badges27 silver badges32 bronze badges

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

2 Comments

Retsam Over a year ago

Yeah; I don't want my libraries to be arguments to every object that I construct. My goal here isn't to construct a single object, it's to use this module to define a constructor that other modules can use, without forcing the other modules to provide me all my libraries every time they construct an object.

Retsam Over a year ago

And, yes, I'm aware that my existing code is still "legal typescript"; but the point is that I want to use typescript so that my Foo objects all have a consistent interface.

itmitica · Accepted Answer · 2014-12-03 05:45:35Z

0

 import $ = require("../vendor/jquery")

This is what you're looking for?

One thing to remember is that any JavaScript code is valid TypeScript code. Use jQuery the way you used to and it will work just fine. Otherwise you need to be more specific.

edited Dec 3, 2014 at 5:45

answered Dec 3, 2014 at 5:37

itmitica

5113 silver badges10 bronze badges

1 Comment

aikeru Over a year ago

This isn't true at all. Try compiling var x = { foo: 5 }; x.bar = "yes";

Collectives™ on Stack Overflow

Typescript equivalent to JS Module pattern

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related