TypeScript和systemjs圈依赖

Question

I have a problem with circle dependencies of modules:

even.ts

import { Odd } from './odd';

export class Even {

    log(){
        return console.log(Odd);        
    }  
}

odd.ts

import { Even } from './even';

export class Odd extends Even{

  log(){
        return console.log(Even);       
    }  

}

Config:

System.config({
  defaultJSExtensions: true,
  baseURL: '/',
  transpiler: 'typescript'
});

System.import('even.js').then( a => console.log(a));

I tried to use requre.js but it can't resolve circle dependencies. In systemjs documentation is written that it can resolve circle depedencies but it doesn't work. The exception is Cannot read property 'prototype' of undefined in __extends function.

Maybe it is better to Use CommonJS, but as I know I cant use module paths from root as I can do it in AMD and SystemJS.

Answer 1

The simplest way to resolve this is to think more in terms of modules, rather than adhering to the patterns found in C# or Java (of having one class per file).

If your Odd and Even classes are inextricably linked, place them both in the same module (file). You can't use one without the other in the set up you describe, so why force a second HTTP request.

Alternatively, re-visit your inheritance hierarchy... perhaps you have chosen the wrong base class if the base class needs to know about one of its specialisations. Maybe you are missing the true base class that both Odd and Even should extend, or maybe you could share an interface rather than a base class.

Another possibility is that you should be using delegation rather than inheritance in this case, or maybe you should be asking for the instance from a factory.

While circular dependency management sounds like a good feature, you can always solve the problem without it by going back to OOD and SOLID principles.

Answer 2

If you just need to fix it then doing

System.import('./odd') .then(() => System.import('./even')) .then(a => console.log(a));

will work.

The issue happens using both TypeScript and Babel and seems to be due to the way that they implement class inheritance in ES5 (via their _extends and _inherits methods in the transpiled code). These methods rely on the module containing the superclass to have been fully executed, however SystemJS does not know this and so it is not executing the modules in the correct order.