Svelte & bind:this

[slashinfty]

I'm trying to create a reference to the calendar in svelte so I can call methods from other components. However, I'm running into some TypeScript errors.

<script lang="ts">
    import {Calendar, TimeGrid} from '@event-calendar/core';

    let options = $state({
        view: 'timeGridWeek',
        events: [
            // your list of events
        ]
    });

    let calendar: Calendar;
</script>

<Calendar bind:this={calendar} plugins={[TimeGrid]} {options} />

This works, however, I have the following error in VS Code:

Type 'SvelteComponent<{ plugins?: object[] | undefined; options?: Options | undefined; }, unknown, unknown> & { $$bindings: string; }' is missing the following properties from type 'Calendar': getOption, setOption, addEvent, getEventById, and 9 more.ts(2740)

If I try to remove the typing from let calendar: Calendar, I get the error "Variable 'calendar' implicitly has an 'any' type."

What is the preferred way to clear this error?

[slashinfty]

If anyone needs the solution to this:

let calendar: SvelteComponent;