0

I found this in the PDFJS viewer sample:

var XX = (function XXClosure() {
  function XX(options) {
    ...
  },
  XX.prototype = {
    myMethod1: function(){...},
    myMethod2: function(){...},
    ...
  }
  return XX;
})();

I create a construct like this, without any idea what it is, and used it in a javascript project in this way:

var myXX = new XX(myOptions);
myXX.Method1();

This works very well.

Now i try to use this construct in a TypeScript project:

declare XX:any
import myJavascript.js;
var myXX = new XX(myOptions);

and i get at runtime the error: "XX is not a constructor"

Don't ask me why i make it in this way, may be there are others, I copied this from PDFJS viewer.js, it worked and i never asked why.

But now, in the typescript project, it should work too.Has someone a solution for this?

Terkosh
  • 61
  • 5
  • 1
    Possible duplicate of [What is the (function() { } )() construct in JavaScript?](http://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript) – Teemu Aug 04 '16 at 14:27
  • Correct but it answers only the first part of my question. – Terkosh Aug 08 '16 at 12:05

4 Answers4

1

This is called like IIFE

var XX = (function XXClosure() {
      function XX(options) {
        ...
      },
      XX.prototype = {
        myMethod1: function(){...},
        myMethod2: function(){...},
        ...
      }
      return XX;
    })();

If you want something to inject from the JavaScript into TypeScript you must use declare statement in the files with .d.ts extensions.

For this see here .d.ts

And also you need to use declare var XX:any -> thanks to toskv

Community
  • 1
  • 1
Suren Srapyan
  • 66,568
  • 14
  • 114
  • 112
1

First is IIFE

For TypeScript, you can use class (documentation)

David
  • 923
  • 8
  • 19
  • Thank you for your answer. Now i know what it is. The class construct is a good idea but i must clarify if i can use ES6 features. – Terkosh Aug 08 '16 at 13:34
1

They're basically creating an ES6 class by using a self-invoking function:, i.e, (function(){})(). This gets assigned to the variable XX.

A similar construct in Typescript would be 

class XX {
  constructor(options){
    //do stuff with options
  }
  myMethod1(){}
  myMethod2(){}
  ...//additional methods
}

You would instantiate this as you would a JS object with 

var xx = new XX(options);

And if you export the class, it should import without any problems.

export class XX{...}
SethWhite
  • 1,891
  • 18
  • 24
  • Thank you for your answer. Now i know what it is. The class construct is a good idea but i must clarify if i can use ES6 features. – Terkosh Aug 08 '16 at 13:34
  • Typescript allows for classes. Your class will then be transpiled into something that looks alot like your original code. Classes: http://www.typescriptlang.org/docs/handbook/classes.html, Modules: http://www.typescriptlang.org/docs/handbook/modules.html – SethWhite Aug 08 '16 at 14:23
  • 1
    The code is common code for different projects. It should work for ts- and also for js-projects. – Terkosh Aug 09 '16 at 11:00
0

Thanks all for your help. The first part of my question is complete answered. The second part, i solved by a fluke. I removed the 'use strict' line and I got an meaningful error message: 'using of an undefined variable'.

I use in the 'constructor' a global object variable which is from an other js module that was not loaded at this time. Placing the "script src='...'" in the head block of the main html page and not in the html template, solved my problem.

Terkosh
  • 61
  • 5