CODEWITHSUNDEEP
typescript
Ciel
Ciel

Reputation: 4440

Typescript; Conflicting information about "modules"

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.

Upvotes: 0

Views: 690

Answers (2)

Fenton
Fenton

Reputation: 250882

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.

Upvotes: 4

Jose Basilio
Jose Basilio

Reputation: 51468

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.

Upvotes: 0

Related Questions