Vaadin 18 | Calling server from client using Littemplate

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);