Vaadin 18 | Вызов сервера от клиента с использованием Littemplate

Question

Я пытаюсь вызвать функцию на стороне сервера от клиента, используя littemplate. Я проверил примеры на сайте Vaadin и обнаружил, что клиент может вызывать серверную часть через this.$ Server._some_method. Я попытался использовать $ server в littemplate, но во время компиляции внешнего интерфейса vaadin выдает ошибку, заявляя, что «Свойство '$server' не существует для типа 'HelloWorld'». Пожалуйста, дайте мне знать, что не так с этой программой, и помогите мне. Спасибо.

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

Ява

      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 не знает, что LitTemplate имеет переменную $ server. Вы должны сами это определить. Вы можете использовать любой тип или определить свой интерфейс. Например: частный сервер $?: MyTestComponentServerInterface;

И добавьте функции clientcallable:

      interface MyTestComponentServerInterface {
    greet(): void;
}