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

Question

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.

I found this class IVisualTemplate on a website with Java source code, but why are you using Java code in JavaScript? docs.yworks.com/yfilesjavafx/doc/javadoc/com/yworks/yfiles/view/… — Reactgular
– Reactgular, Commented Nov 27, 2019 at 10:36
The super call must supply all parameters for base class. The constructor is not inherited . please see : stackoverflow.com/questions/37957404/using-typescript-super — Joel Joseph
– Joel Joseph, Commented Nov 27, 2019 at 10:38

Sebastian · Accepted Answer · 2020-09-25 07:23:53Z

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.

Adrian Brand · Accepted Answer · 2019-11-27 10:33:32Z

0

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

This is not valid JavaScript, try

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

answered Nov 27, 2019 at 10:33

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

4 Comments

Nikolai Ivanov Over a year ago

nooo is not working i have the same error Cannot create an instance of an abstract class, but i need to migrate the code to angular

Adrian Brand Over a year ago

If IVisualTemplate is an interface then you cannot call new on it, just assign the object in my answer to template.

Nikolai Ivanov Over a year ago

how can i do this?

Sebastian Over a year ago

Of course this is valid (modern) EcmaScript 2015. Paste it into your browser's console and see for yourself. It's called a shorthand for object creation: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Nikolai Ivanov · Accepted Answer · 2019-11-27 11:49:25Z

-1

here is the code of IVisualTempleate

answered Nov 27, 2019 at 11:49

Nikolai Ivanov

519 bronze badges

1 Comment

Adrian Brand Over a year ago

Why have you added an unreadable image as an answer? I can't read that.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related