Type of $viewer property

[panknows]

I have the following component code

<template>
  <div ref="rootEl" v-viewer="options">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import Viewer from "viewerjs";

const rootEl = ref<
  | null
  | (HTMLDivElement & {
      $viewer: InstanceType<typeof Viewer>;
    })
>(null);
const viewerInstance = computed(() => {
  return rootEl.value ? rootEl.value.$viewer : null;
});

const options: Viewer.Options = {
  className: "v-viewer-wrapper",
  title: false,
  navbar: false,
  transition: false,
  toolbar: {
    download: {
      show: 4,
      size: "large",
      click: () => {
        const viewer = viewerInstance.value;
        const a = document.createElement("a");
        a.href = viewer?.image.src;
        a.target = "_blank";
        a.download = viewer?.image.alt;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      },
    },
  },
};
</script>

And I have ts error when I try read properties of Viewer instance $viewer of the html node Vue: Property image does not exist on type

How can I resolve this issue?

[mirari]

It seems that viewerjs did not add this prop in the declaration file. If you ignore this error, the code should execute normally, right? You might need to manually force assert this image object.