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?

As a workaround, try import Datepicker from 'svelte-calendar/src/Components/Datepicker.svelte'. There is also a similar issue: github.com/6eDesign/svelte-calendar/issues/119 — Allan Chain
– Allan Chain, Commented Aug 15, 2021 at 23:58
Thanks - that is a nice workaround! The issue logged for svelte-calendar was from me ;-) — nstuyvesant
– nstuyvesant, Commented Aug 16, 2021 at 1:33

dummdidumm · Accepted Answer · 2021-08-16 14:58:31Z

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).

answered Aug 16, 2021 at 14:58

dummdidumm

5,48020 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nstuyvesant Over a year ago

Thanks - I added this to my global.d.ts. In my Schedule.svelte where I import and use 'svelte-calendar', I get a red underline below the instance of Datepicker with the message "JSX element type 'Datepicker' does not have any construct or call signatures." I'm using Svelte 3.44.2.

user15570950 · Accepted Answer · 2022-03-03 18:20:31Z

declare module 'svelte-calendar' {
  import { SvelteComponentTyped } from 'svelte'; 
  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 default class Datepicker extends SvelteComponentTyped<DatepickerProps> {}
}

You need to add the export default class for it to work..

Collectives™ on Stack Overflow

Adding TypeScript types for a 3rd party Svelte module

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related