Fancybox 5 and TypeScript - type 'userSlideType'

[Divensky]

In migrating from JavaScript to TypeScript with Fancybox 5, I ran into one challenge I was not able to overcome. The docs give an example code:

Fancybox.show([{ src: "#dialog-content", type: "inline" }]);

This line works just fine in my JS, but as soon as I convert to TS, the type attribute gives an error: "TS2322: Type '{ src: string; type: string; }' is not assignable to type 'userSlideType'".

I see at https://github.com/fancyapps/ui/blob/main/types/Fancybox/Fancybox.d.ts that the type attribute is not there under userSlideType. I see it in https://github.com/fancyapps/ui/blob/main/types/Fancybox/plugins/Html/Html.d.ts. But with the HTML plug-in described in the docs as built-in, I was not able to figure out what to do to get TypeScript to recognize that the type attribute is legal.

Incidentally, my modals worked just fine when I removed this type: "inline". But there must be a purpose to it in the docs.
I would appreciate any clarification.

[fancyapps]

Hi,

What TS version are you using? I do not see any issues, see this demo -

https://stackblitz.com/edit/typescript-5so1ox?file=index.html,index.ts,style.css

[Divensky]

Thanks a lot. My TypeScript version is 4.9.5. Fancyapps version is 5.0.22.

I updated TypeScript to the latest version on a separate branch. On this branch, the above TS error message got replaced by "Vue: Object literal may only specify known properties, and 'type' does not exist in type 'userSlideType'." The Vue version is 3.3.7.

Updating the TypeScript and Vue versions on the main branch of the project I am working on is not something I can accomplish easily.

Does the above data give you any clue as to what might be causing this?

My modals seemed to work when I removed type: "inline". What does this attribute do? Could the lack of it cause unwanted behavior under certain conditions in the future?

[fancyapps]

I'm sorry, but I don't know what to answer. The code is fine, everything works wonderfully as you can see in the demo (or any other demo you can find in the docs).

If you're stuck with TS4 (which is very buggy), then just throw in @ts-ignore and forget about it.

My modals seemed to work when I removed type: "inline". What does this attribute do? Could the lack of it cause unwanted behavior under certain conditions in the future?

The script can guess that you want to display an inline element because src starts with #. The src value can be any selector, but, if you use anything else, the script won't be able to guess correctly and you can specify the content type directly.

[Divensky]

Thanks a lot. So I see that as long as my src starts with # I can live without type attribute for an inline element. For now it seems good enough. Some time in the future we might get to update TS version for the entire project. Thank you for your help!