为第 3 方 Svelte 模块添加 TypeScript 类型

Question

我使用的是 svelte-calendar@2.0.4，它没有 TypeScript 定义。

我尝试将以下类型定义添加到我的 global.d.ts 中，但在 VS Code 中收到警告

JSX 元素类型 'Datepicker' 在 Datepicker 的实例上没有任何构造或调用 signatures.ts(2604)：

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

添加到 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> {}
}

基于Datepicker.svelte sources。

我从未尝试为第 3 方组件添加类型。对我做错了什么有什么想法吗？

Answer 1

您的定义几乎是正确的。您需要在模块声明中导入 SvelteComponentTyped，否则 TS 不知道您的扩展来源。

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> {}
}

请注意，您至少需要 Svelte 3.31（该版本中添加了SvelteComponentTyped）。