Typescript; Conflicting information about "modules"

Question

I am trying to set up some "modules" in typescript for my site, and I am getting both conflicting information - and conflicting results. For example, I have three "classes". Prototype, Item, and Tag. They all three need to have a specific set of properties, so I decided to make this a base class ComponentModel, which looks like this.

module website.admin.components {
    export class ComponentModel {
    
       public Components = { // define property };
    }
}

now, I want to inherit this class in my other three, so I started with 'tags'.

module website.admin.viewModels {
   export class Tag extends website.admin.components.ComponentModel {
   
      // tag specific properties
      constructor() { super(); } // initialize the base class as required
   }
}

Okay, this seems to work. But the exact same code on the Prototype class does not work;

module website.admin.viewModels {
    export class Prototype extends website.admin.components.ComponentModel {
    
        // prototype specific properties
        constructor() { super(); }
    }
}

This just causes all kinds of strange behavior, and refuses to work at runtime. I get the following errors;

Uncaught TypeError: Cannot read property 'ComponentModel' of undefined

Uncaught TypeError: Cannot read property 'prototype' of undefined

Uncaught TypeError: undefined is not a function

Can anyone help me figure out why this is functioning like this? And what I can do to stop it? It is getting dreadfully irritating.

score 4 · Accepted Answer · edited May 23 '17 at 12:20

4

The chances are that your scripts are being loaded in the wrong order. If you check the bundled file, do the dependencies appear before they are used? Usually they don't unless you take steps to ensure that they are ordered neatly.

How do you order them correctly?

If you are using ASP.NET MVC bundling, you can manually order the bundle.

Alternatively, if you add the ///<reference path="...ts" /> reference comments to your files and compile to a single file using the --out flag on the TypeScript compiler, it will sort out the order based on the reference comments as long as there are no circular dependencies.

You could still bundle and minify based on the combined output TypeScript creates for you if you want to do that.

edited May 23 '17 at 12:20

Community

1
1

answered Jan 28 '14 at 00:08

Fenton

241,084
71
387
401

I was under the (apparently false) assumption that typescript used the AMD module format to automatically ensure things loaded in the right order. – Ciel Jan 28 '14 at 03:25
If you want to use AMD, you need to switch to External Modules - you are using internal modules. Then you use an import statement, rather than a reference comment. – Fenton Jan 28 '14 at 08:43
Honestly I have not once had a situation where the `import` statement worked right. It always tells me `cannot declare a module to a non-module type`. I have dug up countless "tutorials" on the subject and none have helped. – Ciel Jan 28 '14 at 15:01
Everything I find always assumes that your classes are all "root level', with no namespace nesting whatsoever. – Ciel Jan 28 '14 at 15:01
For the sake of organization, I have my things organized into namespaces, many of them are nested and categorized. The 'modules' do not seem to support this concept. – Ciel Jan 28 '14 at 15:03
Show me an example of a problem you had with the `import` statement and I'll help you out. Once you have it working, I'm sure you'll love it! You might want to create a new question for it. – Fenton Jan 28 '14 at 15:06
Sure thing, I have made the question for you here: http://stackoverflow.com/questions/21412100/typescript-unable-to-get-import-statement-to-function – Ciel Jan 28 '14 at 17:06

score 0 · Answer 2 · answered Jan 27 '14 at 20:57

0

From the looks of the error, it would appear as if the Prototype class is in a different file and doesn't have a reference to the file that contains the ComponentModel class.

answered Jan 27 '14 at 20:57

Jose Basilio

50,714
13
121
117

But the Tags file is the same way, and it works fine. Why would that Tags.ts file work and not the Prototype file? – Ciel Jan 27 '14 at 20:58
So neither tags.ts nor prototype.ts have a reference to "componentmodel.ts" ? – Jose Basilio Jan 27 '14 at 21:02
Correct. But it works fine for the `Tags.ts` file, even though neither of them have any reference to it. – Ciel Jan 27 '14 at 21:07
I'm assuming you don't have any errors during compilation and this is happening a run time in the compiled JavaScript? Is this being used in a web app? You may be missing a reference to the componentmodel.js in the page or in the bundle? Try doing a view source on the page that uses the tags.js and compare against the one using prototype.js – Jose Basilio Jan 27 '14 at 21:12
Yes, this is only happening at run time, and yes, it is a web app. There is no real way it could be missing a reference, it is using the ASP.NET bundling system to bundle all of the files together, and it is clearly showing there. – Ciel Jan 27 '14 at 21:20

Typescript; Conflicting information about "modules"

2 Answers2