Typescript signature example

[johanrd]

Hi. With Glint, it has it has been quite vital for me to have the yielded items of vertical collection to be typed more strongly than 'any'.

I am not sure how to best contribute to typing Vertical Collection itself, but here is the signature I have been using to 'patch' the typings for glint (in case it is can be of use to others until types are exported by default)

Copy into /types/@html-next/vertical-collection/components/vertical-collection/component/index.d.ts:

import Component from '@glimmer/component';

interface VerticalCollectionSignature<T> {
  Args: {
    items?: readonly T[];
    estimateHeight?: number;
    bufferSize?: number;
    containerSelector?: string;
    staticHeight?: boolean;
    key?: string;
    scrollTop?: number;
    renderAll?: boolean;
    renderFromLast?: boolean;
    idForFirstItem?: string;
    shouldRecycle?: boolean;
    firstReached?: (item: T, index: number) => void;
    lastReached?: (item: T, index: number) => void;
    firstVisibleChanged?: (item: T, index: number) => void;
    lastVisibleChanged?: (item: T, index: number) => void;
  };
  Blocks: {
    default: [item: readonly T, index: number];
  };
}

export default class VerticalCollection<T = unknown> extends Component<
  VerticalCollectionSignature<T>
> {}

declare module '@glimmer/component' {
  export default interface Registry {
    VerticalCollection: typeof VerticalCollection;
  }
}

[johanrd]

For the v5.0.2, this is the updated patch and location:

types/@html-next/vertical-collection/index.d.ts:

import Component from '@glimmer/component';

interface VerticalCollectionSignature<T> {
  Element: HTMLDivElement;
  Args: {
    items?: readonly T[];
    estimateHeight?: number;
    bufferSize?: number;
    containerSelector?: string;
    staticHeight?: boolean;
    key?: string;
    scrollTop?: number;
    renderAll?: boolean;
    renderFromLast?: boolean;
    idForFirstItem?: string;
    shouldRecycle?: boolean;
    firstReached?: (item: T, index: number) => void;
    lastReached?: (item: T, index: number) => void;
    firstVisibleChanged?: (item: T, index: number) => void;
    lastVisibleChanged?: (item: T, index: number) => void;
  };
  Blocks: {
    default: [item: readonly T, index: number];
  };
}

export class VerticalCollection<T = unknown> extends Component<
  VerticalCollectionSignature<T>
> {}

declare module '@glimmer/component' {
  export default interface Registry {
    VerticalCollection: typeof VerticalCollection;
  }
}