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

Question

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

我尝试将下面的类型定义添加到我的 global.d.ts 但我在 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>

添加到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）。

Answer 2

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

您需要添加 export default class 才能正常工作..

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

Adding TypeScript types for a 3rd party Svelte module

typescript

typescript-typings

svelte

svelte-component