How to create CustomSlide in TypeScript?

[cecbr]

I followed all the steps to create a CustomSlider in typescript but it doesn't work.

I created a ".d.ts" file as it was in the documentation:

interface CustomSlide {
    type: "custom-slide";
    // slide attributes
}

declare module "yet-another-react-lightbox" {
    interface SlideTypes {
        CustomSlide: CustomSlide;
    }
}

Do you have an example of how to do this?

Thanks for any help.

[igordanchenko]

v3 UPDATE

import { GenericSlide } from "yet-another-react-lightbox";

declare module "yet-another-react-lightbox" {
  export interface CustomSlide extends GenericSlide {
    text: string;
  }

  interface SlideTypes {
    "custom-slide": CustomSlide;
  }
}

Complete example - https://codesandbox.io/s/yet-another-react-lightbox-47-v3-oc7s4h?file=/src/App.tsx

---

Here is a working example - https://codesandbox.io/s/yet-another-react-lightbox-47-wwqj1k

There are 2 caveats to keep in mind:

1. You need to cast the custom slide type string as const to make TypeScript happy:

const slides = [
  {
    type: "custom-slide" as const,
    // slide attributes
  }
]

2. Since you are adding type declarations in a separate .d.ts file, it has to be a module. Adding export {} at the end of the file should do the trick.