TypeScript type definitions for Vaadin component events (part 2: 15 of 35 components)

[vlukashov]

When using Vaadin components in TypeScript code, for each component I want to see the available events and their TypeScript types in IDE auto-completion so that I do not have to look this up in the docs or rely on my memory. I also want the TypeScript compiler to automatically verify that I use the correct types when accessing event details in event handlers in TypeScript.

Included components: 15 out of 35 (part 1: #1745)

Acceptance criteria

• [IDE auto-completion in lit-html templates]
  • when adding an event handler to a Vaadin component, after I enter @ IDE auto-suggests the same events as are listed in the API docs for the component (e.g. for vaadin-combo-box the IDE should auto-suggest change, custom-value-set, selected-item-changed, value-changed, as listed in the API docs)
  • (known limitation) when defining an inline event handler for an event, the correct type of the event argument is inferred automatically
    • for non-generic event types (e.g. the type of the invalid-changed event on vaadin-text-field)
    • for generic event types (e.g. the type of the selected-item-changed event on vaadin-combo-box)
• [IDE auto-completion in imperative TypeScript code]
  • when adding an event handler to a Vaadin component, after I type .addEventListener(' IDE auto-suggests the same events as are listed in the API docs for the component (e.g. for vaadin-combo-box the IDE should auto-suggest change, custom-value-set, selected-item-changed, value-changed, as listed in the API docs)
  • when defining an event handler for an event, the correct type of the event argument is inferred automatically
    • for non-generic event types (e.g. the type of the invalid-changed event on vaadin-text-field)
    • for generic event types (e.g. the type of the selected-item-changed event on vaadin-combo-box)
• [build-time type checking in imperative TypeScript code]
  • using a wrong event name in addEventListener is a compilation error (e.g. selected-item-changed on vaadin-text-field)
  • explicitly using a wrong the event type in addEventListener is a compilation error (e.g. declaring the event type as {detail: {value: string}} in invalid-changed on vaadin-text-field)
  • implicitly using a wrong the event type in addEventListener is a compilation error (e.g. assigning event.detail.value to a string variable in invalid-changed on vaadin-text-field)

General criteria

• UX/DX tests in Alpha - done for the TypeScript type definitions for Vaadin component events (part 1: 20 of 35 components) #1745 (batch 1)
• Documentation (all cases where the docs include TS / LitElement code samples with Vaadin components should use typed events)
• How to test?
• Limitations: automatic TS type inference does not work in lit-html templates, build-time type checking does not work in lit-html templates