Adding TypeScript types for a 3rd party Svelte module

Question

I'm using [email protected] and it has no TypeScript definitions.

I tried adding the type definitions below to my global.d.ts but am getting a warning in VS Code

JSX element type 'Datepicker' does not have any construct or call signatures.ts(2604) on the instance of the Datepicker:

<Datepicker bind:selected={selectedDate} {start} class="btn btn-sm">
  <button class="btn btn-sm btn-secondary date-picker">{selectedDateString}</button>
</Datepicker>

Added to global.d.ts...

declare module 'svelte-calendar' {
  interface DatepickerProps
    extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
    format?: string
    start?: Date
    end?: Date
    selected?: Date
    dateChosen?: boolean
    trigger?: () => void
    selectableCallback?: () => void
    weekStart?: number
    daysOfWeek?: Array<string, string>
    monthsOfYear?: Array<string, string>
    style?: string
    buttonBackgroundColor?: string
    buttonBorderColor?: string
    buttonTextColor?: string
    highlightColor?: string
    dayBackgroundColor?: string
    dayTextColor?: string
    dayHighlightedBackgroundColor?: string
    dayHighlightedTextColor?: string
  }
  export class Datepicker extends SvelteComponentTyped<DatepickerProps> {}
}

based on the Datepicker.svelte sources.

I've never tried adding types for a 3rd party component. Any thoughts on what I'm doing wrong?

Answer 1

Your definition was almost correct. You need to import SvelteComponentTyped within your module declaration, else TS doesn't know what you extend from.

declare module 'svelte-calendar' {
  import { SvelteComponentTyped } from 'svelte'; // <<<--- added
  interface DatepickerProps
    extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
    format?: string
    start?: Date
    end?: Date
    selected?: Date
    dateChosen?: boolean
    trigger?: () => void
    selectableCallback?: () => void
    weekStart?: number
    daysOfWeek?: Array<string, string>
    monthsOfYear?: Array<string, string>
    style?: string
    buttonBackgroundColor?: string
    buttonBorderColor?: string
    buttonTextColor?: string
    highlightColor?: string
    dayBackgroundColor?: string
    dayTextColor?: string
    dayHighlightedBackgroundColor?: string
    dayHighlightedTextColor?: string
  }
  export class Datepicker extends SvelteComponentTyped<DatepickerProps> {}
}

Note that you need at least Svelte 3.31 for this (SvelteComponentTyped was added in that version).