为第三方Svelte模块svelte-calendar添加TypeScript类型定义报错如何解决？

你的类型定义存在3个核心问题，会直接导致TS不识别组件类型，抛出对应的报错：

1. 没有导入Svelte组件的基类，Datepicker的类型不被识别为合法的Svelte组件构造器
2. Array<string, string>是非法的数组泛型写法（数组泛型仅支持1个参数），导致整个模块声明语法错误，TS直接忽略该定义
3. 导出方式可能和你实际的组件导入方式不匹配，导致类型对应不上

步骤1：修正类型定义 #

根据你使用的Svelte版本选择对应的类型代码：

Svelte 3 版本 #

import type { SvelteComponentTyped } from 'svelte'

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>
    monthsOfYear?: Array<string>
    style?: string
    buttonBackgroundColor?: string
    buttonBorderColor?: string
    buttonTextColor?: string
    highlightColor?: string
    dayBackgroundColor?: string
    dayTextColor?: string
    dayHighlightedBackgroundColor?: string
    dayHighlightedTextColor?: string
  }
  // 如果你是默认导入（import Datepicker from 'svelte-calendar'），保留下面这行
  export default class Datepicker extends SvelteComponentTyped<DatepickerProps> {}
  // 如果你是命名导入（import { Datepicker } from 'svelte-calendar'），注释上一行，取消下一行注释
  // export class Datepicker extends SvelteComponentTyped<DatepickerProps> {}
}

Svelte 4+ 版本 #

import type { SvelteComponent } from 'svelte'

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>
    monthsOfYear?: Array<string>
    style?: string
    buttonBackgroundColor?: string
    buttonBorderColor?: string
    buttonTextColor?: string
    highlightColor?: string
    dayBackgroundColor?: string
    dayTextColor?: string
    dayHighlightedBackgroundColor?: string
    dayHighlightedTextColor?: string
  }
  // 根据你的导入方式二选一
  export default class Datepicker extends SvelteComponent<DatepickerProps> {}
  // export class Datepicker extends SvelteComponent<DatepickerProps> {}
}

步骤2：校验tsconfig配置 #

确保你的tsconfig.json的include数组里包含了global.d.ts的路径，示例配置：

{
  "compilerOptions": { /* 你的原有配置 */ },
  "include": ["src/**/*", "src/global.d.ts"]
}

步骤3：刷新类型缓存 #

修改完成后，按快捷键Ctrl+Shift+P（Mac系统为Cmd+Shift+P），执行命令「Svelte: Restart Language Server」，或者直接重启VS Code，类型即可正常生效。

内容的提问来源于stack exchange，提问作者nstuyvesant