Inheriting factories in Angular 1.5.x with Typescript

52 Views Asked by At

I'm trying to introduce Typescript to my existing Angular 1.5.x application. Currently we don't have the privilege to migrate the complete application to Angular 2. To get ES6 benefits I'm trying to use TypeScript. I stuck with one problem now. We've models like BaseComponentModel which is derived by FormModel, GridModel etc. These models are injected to directives that renders the components and these models also registered as factories in AngularJS.

I could able to successfully port my BaseComponentModel to TypeScript as below,

BaseComponentModel.ts

abstract class BaseComponentModel {

   constructor(private metaJson) {}

   public type: string;

   public label: string;

   ...
}

module.exports = () => BaseComponentModel;

BaseModule.ts

module.exports = angular.module('base').factory('BaseComponentModel', require('./BaseComponentModel'));

Now I need to import the base model to my FormModel to do the inheritance.

FormModel.ts

function FormModelProvider(BaseComponentModel: BaseComponentModel) {
  return class FormModel extends BaseComponentModel {
     public action: string;

     public isValid: bool;

     ...
  }
}

FormModelProvider.$inject = ['BaseComponentModel'];
module.exports = FormModelProvider;

I don't see any issues during compile type by runtime I'm getting the following error,

error TS2507: Type 'BaseComponentModel' is not a constructor function type.

How can I solve this error?

0

There are 0 best solutions below