Typescript file order issue when extending classes

Question

I am defining models using TypeScript and I have encountered an issue when extending classes. I have two classes, each within a code file of the same name:

class kanine {
     name = 'dog'
}

and

class beagle extends kanine {
    constructor(name: string) {
        super();
        this.name = name;
    }
}

Within the solution they appear as such:

When I run the application I get this error:

However, when I rename the code file which contains the kanine class from kanine.ts to 1kanine.ts, I do not get the error. Another workaround is by bundling them like this:

.Include("~/app/kanine.js")
.Include("~/app/beagle.js")

Instead of like this:

.IncludeDirectory("~/app", "*.js")

Is there a way to process the files in an explicit order without having to include them individually?

Answer 1

The reason why this is happening is because the base class kanine needs to be defined before the parser gets to beagle.

You can fix this one of two ways:

1. Continue to explicitly define the order of each individual .js file as you are currently doing in your first example.

2. Change your compilation settings, either with a tsconfig.json or through the project properties, so that the .ts files are combined into a single .js file, and rely on the typescript compiler to order them properly.

If you choose option 2, you'll need to use /// reference tags to help the compiler figure out which file should be output first. This is as simple as adding this to beagle.ts:

/// <reference path="kanine.ts" />

This will make sure that kanines javascript is output before beagles.