feat: allow passing specific item type to virtual list types (#2137)

Author: tomivirkki

packages/vaadin-virtual-list/src/vaadin-virtual-list.d.ts

@@ -2,17 +2,17 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
 
-export type VirtualListItem = unknown;
+export type VirtualListDefaultItem = any;
 
-export interface VirtualListItemModel {
+export interface VirtualListItemModel<TItem> {
   index: number;
-  item: VirtualListItem;
+  item: TItem;
 }
 
-export type VirtualListRenderer = (
+export type VirtualListRenderer<TItem> = (
   root: HTMLElement,
-  virtualList: VirtualListElement,
-  model: VirtualListItemModel
+  virtualList: VirtualListElement<TItem>,
+  model: VirtualListItemModel<TItem>
 ) => void;
 
 /**
@@ -36,7 +36,7 @@ export type VirtualListRenderer = (
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-declare class VirtualListElement extends ElementMixin(ThemableMixin(HTMLElement)) {
+declare class VirtualListElement<TItem = VirtualListDefaultItem> extends ElementMixin(ThemableMixin(HTMLElement)) {
   /**
    * Custom function for rendering the content of every item.
    * Receives three arguments:
@@ -48,12 +48,12 @@ declare class VirtualListElement extends ElementMixin(ThemableMixin(HTMLElement)
    *   - `model.index` The index of the rendered item.
    *   - `model.item` The item.
    */
-  renderer: VirtualListRenderer | undefined;
+  renderer: VirtualListRenderer<TItem> | undefined;
 
   /**
    * An array containing items determining how many instances to render.
    */
-  items: Array<VirtualListItem> | undefined;
+  items: Array<TItem> | undefined;
 
   /**
    * Scroll to a specific index in the virtual list.

packages/vaadin-virtual-list/test/typings/virtual-list.types.ts

@@ -1,28 +1,36 @@
 import '../../vaadin-virtual-list.js';
 
-import {
-  VirtualListElement,
-  VirtualListItem,
-  VirtualListItemModel,
-  VirtualListRenderer
-} from '../../vaadin-virtual-list.js';
+import { VirtualListElement, VirtualListItemModel, VirtualListRenderer } from '../../vaadin-virtual-list.js';
 
 const assertType = <TExpected>(actual: TExpected) => actual;
 
-const virtualList = document.createElement('vaadin-virtual-list');
+const genericVirtualList = document.createElement('vaadin-virtual-list');
 
-assertType<VirtualListElement>(virtualList);
+assertType<VirtualListElement>(genericVirtualList);
 
-assertType<VirtualListItem>(1);
-virtualList.items = [1, 2, 3];
+genericVirtualList.items = [1, 2, 3];
+
+interface TestVirtualListItem {
+  testProperty: string;
+}
+
+const virtualList = genericVirtualList as VirtualListElement<TestVirtualListItem>;
+
+assertType<VirtualListElement<TestVirtualListItem>>(virtualList);
+
+virtualList.items = [{ testProperty: '1' }, { testProperty: '2' }, { testProperty: '3' }];
+
+assertType<Array<TestVirtualListItem>>(virtualList.items);
 
 virtualList.renderer = (root, virtualList, model) => {
   assertType<HTMLElement>(root);
   assertType<VirtualListElement>(virtualList);
-  assertType<VirtualListItemModel>(model);
+  assertType<VirtualListItemModel<TestVirtualListItem>>(model);
+  assertType<number>(model.index);
+  assertType<TestVirtualListItem>(model.item);
 };
 
-assertType<VirtualListRenderer>(virtualList.renderer);
+assertType<VirtualListRenderer<TestVirtualListItem>>(virtualList.renderer);
 
 assertType<void>(virtualList.scrollToIndex(3));