CODEWITHSUNDEEP
javascriptangularhttpyfiles
Nikolai Ivanov
Nikolai Ivanov

Reputation: 51

Cannot create an instance of an abstract class in angular but in JS is working fine

Hi team im have a very small question, i have this code: 

constructor(private mapper: any, private applyCallback: (arg0: INode) => void) {
super()

  /** @type {GanttMapper} */
  this.mapper = new GanttMapper(datamodel);
/** @type {function(INode):void} */
  this.applyCallback = applyCallback;

// create the dummy node
  this.dummyNode = new SimpleNode();
  // switch off the default template
  //type RouterClass = typeof ;
  //interface RouterDerived extends RouterClass { }
  console.log("routerClass");
  this.template = new IVisualTemplate({
      createVisual() {
          return null;
      },
      updateVisual() {
          return null;
      }
 });}

but in the part: 

this.template = new IVisualTemplate({
      createVisual() {
          return null;
      },
      updateVisual() {
          return null;
      }
  });

im have an error and the error is this: Cannot create an instance of an abstrac class in JS this code is working fine but im trying to migrate it in angular and is not working.

im read the other part of same issues but i cant solved it...... im try all tipes of replays but is not working. Thanks all.

Upvotes: 0

Views: 2028

Answers (3)

Sebastian
Sebastian

Reputation: 8005

This is because Angular (or rather TypeScript) is more strict than JavaScript. There are things you can do in JavaScript that cannot properly be expressed in a TypeScript definition file, without weakening the type-checks. This is one of those things. It will work at runtime, but the TypeScript compiler does not understand this feature and will warn you not to use that unrecognized construct.

It's a feature, unique to the yFiles class library and it's called quick interface implementation.

The documentation also states this:

Quick Interface Implementation in TypeScript
The TypeScript .d.ts file doesn’t contain typings that allow quick interface implementations. They still work at runtime, but the TypeScript compiler will produce an error nonetheless. To work around this issue, you can either tell the compiler to ignore the offending line, or use an anonymous implementation of the interface:

// @ts-ignore
const customHitTestable = new IHitTestable((context, location) => location.x > 25)

const customVisualCreator = new class extends BaseClass<IVisualCreator>(IVisualCreator) {
  createVisual(context: IRenderContext): Visual {
    return new SvgVisual(document.createElementNS("http://www.w3.org/2000/svg", "g"))
  }
  updateVisual(context: IRenderContext, oldVisual: Visual): Visual {
    return oldVisual
  }
}

In newer version of yFiles for HTML (since 2.3), there is now a convenient short-hand that works great with typescript:

const customHitTestable = IHitTestable.create((context, location) => location.x > 25)

This does not require the ts-ignore and works for all interfaces: If there is only one method in the interface, all you need to do is pass its implementation to the .create method on the interface object. If there are more members, they need to be passed in via an option object with the names of the members. The typescript definition file provides full completion for this usecase, now.

Upvotes: 2

Nikolai Ivanov
Nikolai Ivanov

Reputation: 51

here is the code of IVisualTempleate

here is the code of IVisualTempleate

Upvotes: -1

Adrian Brand
Adrian Brand

Reputation: 21658

{
  createVisual() {
    return null;
  },
  updateVisual() {
    return null;
  }
}

This is not valid JavaScript, try

{
  createVisual: () => {
    return null;
  },
  updateVisual: () => {
    return null;
  }
}

Upvotes: 0

Related Questions