Vaadin 18 | Calling server from client using Littemplate - vaadin

Question

I am trying to call server side function from client using littemplate. I have checked examples on Vaadin site and found that client may call server side via this.$server._some_method.
I tried to use $server in littemplate but during frontend compilation vaadin throws error stating that "Property '$server' does not exist on type 'HelloWorld'."
Please let me know what is wrong with this program and guide me.
Thank you.
Littemplate
import {LitElement, html} from 'lit-element';
import '#vaadin/vaadin-button/vaadin-button.js';
class HelloWorld extends LitElement {
render() {
return html`
<div>
<vaadin-button id="helloButton">Click me!</vaadin-button>
</div>`;
}
sayHello(){
showNotification("Hello");
this.$server.greet(); //Problematic statement.
}
}
customElements.define('hello-world', HelloWorld);
Java
package com.example.application.littemplate;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.littemplate.LitTemplate;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.template.Id;
import com.vaadin.flow.component.textfield.TextField;
//HelloWorld.java
#Tag("hello-world")
#JsModule("./views/littemplate/hello-world.ts")
public class HelloWorld extends LitTemplate {
#Id
// Uses the vaadin-button id "helloButton"
private Button helloButton;
public HelloWorld() {
helloButton.addClickListener(event -> Notification.show("Hello " + nameField.getValue()));
}
#ClientCallable
public void greet() {
System.out.println("Hello server");
}
}

Answer 1

Typescript does not know that LitTemplate has a $server variable. You have to define it yourself.
You can use type any or define your interface.
For example:
private $server?: MyTestComponentServerInterface;
And add the #ClientCallable functions:
interface MyTestComponentServerInterface {
greet(): void;
}
In your case, your typescript could be:
import {LitElement, html} from 'lit-element';
import '#vaadin/vaadin-button/vaadin-button.js';
class HelloWorld extends LitElement {
private $server?: HelloWorldServerInterface;
render() {
return html`
<div>
<vaadin-button id="helloButton">Click me!</vaadin-button>
</div>`;
}
sayHello(){
showNotification("Hello");
this.$server!.greet(); // should work with autocompletion
}
}
interface HelloWorldServerInterface {
greet(): void;
}
customElements.define('hello-world', HelloWorld);