Cannot reference object using TypeScript and Require.JS

Question

I have a TypeScript project. Basically I have a file called myId.ts:

export module MyModule {
    export class MyId {
        constructor() { ... }
        public compareTo(other: MyId): number { ... }
        public toString(): string { ... }
    }
}

I have a tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "noImplicitAny": true,
        "removeComments": false,
        "preserveConstEnums": true,
        "sourceMap": false,
        "module": "amd",
        "outDir": "./out"
    },
    "files": [
        "myId.ts"
    ]
}

I compile this thing using this command:

tsc --project .

Where the current directory contains the configuration file ad also the source file.

Well, when compiling everything is fine, I get out/myId.js:

define(["require", "exports"], function (require, exports) {
    var MyModule;
    (function (MyModule) {
        var MyId = (function () {
            function MyId() { ... }
            MyId.prototype.compareTo = function (other) { ... };
            MyId.prototype.toString = function () { ... };
        })();
        MyModule.MyId = MyId;
    })(MyModule = exports.MyModule || (exports.MyModule = {}));
});

Problems referencing `MyId`

Well, I want to use this in a web page and call it from using JavaScript, so by following Require.JS guidelines, I create my web page:

<html>
  <head>
    <meta charset="UTF-8">
    <title>EVT Example - Minimal</title>
    <script src="./require.js" type="text/javascript" data-main="./myId"></script>
  </head>
  <body></body>
</html>

However, when I open the inspector (F12 tools) and try referencing MyModule.MyId, nothing can be found! How can I reference my type?

Everything loaded fine

The inspector told me that myId.js has been successfully loaded actually. So it is not a problem concerning the fact that Require.JS did not load the script.

What to do?

basarat · Accepted Answer · 2016-02-22 22:59:33Z

2

when I open the inspector (F12 tools) and try referencing MyModule.MyId, nothing can be found! How can I reference my type

Modules are not global and that is a good thing. So if you type MyModule.MyId nothing will happen.

If you want to access it on the console you can put it on window e.g.:

export module MyModule {
    export class MyId {
        constructor() { ... }
        public compareTo(other: MyId): number { ... }
        public toString(): string { ... }
    }
}
(window as any).MyModule = MyModule;

Then you can do MyModule.MyId in the console. Of course there is only one global space and its an awful idea to start polluting it (kills the purpose of modular maintainable JavaScript). Its okay to do it for testing 🌹

answered Feb 22, 2016 at 22:59

basarat

278k60 gold badges475 silver badges528 bronze badges

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

4 Comments

Andry Over a year ago

I see... That is nice. However I have a question... Where does actually require.js put all the stuff? If not in the window object, where?

basarat Over a year ago

In a function wrapped by a define call. The top level define is called by data-main 🌹

Andry Over a year ago

Is as allowed in TypeScript?

basarat Over a year ago

as is for type assertion. See basarat.gitbooks.io/typescript/content/docs/types/…

Collectives™ on Stack Overflow

Cannot reference object using TypeScript and Require.JS

Problems referencing `MyId`

Everything loaded fine

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Problems referencing MyId

Everything loaded fine

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Problems referencing `MyId`