GWT JsInterop - extending a Java interface in JavaScript

Question

So, we are trying to use JsInterop so that in our GWT application, we can use some modules created externally in JavaScript.

We have an interface that have some contract, some methods that must be implemented by all views.

For example:

package com.foo;

import jsinterop.annotations.JsPackage;
import jsinterop.annotations.JsType;

@JsType(namespace = JsPackage.GLOBAL) 
public interface MyView {

    void doSomething();
    void doSomethingElse();
    Element getElement();   
}

Now imagine that in the JS side, we have the implementation of that interface:

export class MyViewImplementation extends window.$wnd.MyView {

  constructor() {
    super();
  }

  doSometing() {
    //Implementation goes here
  }

  doSomethingElse() {
    //Implementation goes here
  }

  getElement() {
    var div = document.createElement("div");
    div.textContent = "External Component Test";
    return div;
  }
}

Can this work? Currently, I have an error which says: Class extends value undefined is not a constructor or null

Answer 1

Based on your feedback to my comment, I would remove @JsType from your interface and introduce a class with @JsType(isNative=true) that implements the interface.

public interface MyView {

    void doSomething();
    void doSomethingElse();
    Element getElement();   
}

public class JavaView implements MyView {
    // . . .
}

@JsType(isNative = true, namespace = JsPackage.GLOBAL)
public class JsView implements MyView {

    @Override
    public native void doSomething();

    @Override
    public native void doSomethingElse();

    @Override
    public native Element getElement();   
}

Then in JavaScript:

export class JsView {
    // . . .
}