Svelte+TypeScript中Bootstrap带点事件名的类型定义问题

核心原因 #

你之前的尝试无效，是因为Svelte事件绑定语法里，on:shown.bs.modal中的.bs.modal属于事件修饰符，TypeScript只会解析冒号后第一个点前的shown作为事件名，所以你添加'shown.bs.modal'作为属性名完全不被识别，TS只会找onshown这个属性。

正确的类型定义步骤 #

1. 安装Bootstrap类型定义（推荐） #

先安装官方类型包，避免手动定义事件属性：

npm install @types/bootstrap --save-dev

2. 在global.d.ts中扩展事件类型 #

在项目src目录下创建或修改global.d.ts，添加以下代码：

import type { Modal } from 'bootstrap';

declare namespace svelte.JSX {
  interface HTMLProps<T> {
    // 为shown事件指定Bootstrap的ModalEvent类型
    onshown?: (event: Modal.Event) => void;
    // 按需添加其他Bootstrap模态框事件
    onhidden?: (event: Modal.Event) => void;
    onshow?: (event: Modal.Event) => void;
    onhide?: (event: Modal.Event) => void;
  }
}

3. 无@types/bootstrap的替代方案 #

如果不想依赖官方类型，可手动定义事件结构：

declare namespace svelte.JSX {
  // 手动定义Bootstrap模态框事件的核心属性
  interface BootstrapModalEvent extends Event {
    relatedTarget?: Element;
  }

  interface HTMLProps<T> {
    onshown?: (event: BootstrapModalEvent) => void;
    onhidden?: (event: BootstrapModalEvent) => void;
  }
}

验证 #

现在在Svelte组件中使用on:shown.bs.modal={() => {/* 业务逻辑 */}}时，TypeScript就不会再报onshown不存在的错误了。

注意：global.d.ts要放在TypeScript能扫描到的目录（比如src根目录），且tsconfig.json的include配置需包含该文件（一般"include": ["src/**/*"]即可满足）。

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