reactjstypescriptopenseadragon

OpenSeadragon missing prop in types definition

I have an application written in React Typescript and use OpenSeadragon (https://openseadragon.github.io/) to display images. To get type definitions for OpenSeadragon I use @types/openseadragon: https://www.npmjs.com/package/@types/openseadragon

I want to use the toolbar prop coming from OpenSeadragon (https://openseadragon.github.io/examples/ui-toolbar/), however, this prop is missing in the types definition. So, when I try to use the prop in the code as so:

OpenSeadragon({
                id: 'openseadragon-container',
                toolbar: 'toolbarDiv',
            });

I get the following error:

(property) toolbar: string Argument of type '{ id: string; toolbar: string; }' is not assignable to parameter of type 'Options'. Object literal may only specify known properties, and 'toolbar' does not exist in type 'Options'.

I am wondering if there are any way to overcome this and how I can be able to use the toolbar prop ? Any suggestions?

Solution

  • One way to solve this would be to create an interface of the Options type and include the toolbar in there. So you would extend the existing Options type and include all the parameters you need.

    interface OptionsWithToolbar extends OpenSeadragon.Options {
  toolbar: string;
}

OpenSeadragon({
  id: "openseadragon-container",
  toolbar: "toolbarDiv"
} as OptionsWithToolbar);