Vue3单文件组件中使用Bootstrap Modal类型变量报错求助

问题原因 #

从bootstrap导入的Modal是一个运行时类（值），并非TypeScript类型，直接用它做类型注解会触发TS的类型检查错误。

解决方案一：使用InstanceType推导实例类型 #

通过InstanceType<typeof Modal>获取类的实例类型，同时给变量添加| null兼容初始值：

<script setup lang="ts">
import { Modal } from "bootstrap";
// 推导Modal类的实例类型，并允许null值
let modal: InstanceType<typeof Modal> | null = null;

// 示例：初始化模态框
const initModal = () => {
  const modalEl = document.getElementById("your-modal-id");
  if (modalEl) {
    modal = new Modal(modalEl);
  }
};
</script>

解决方案二：分离类型与值的导入 #

用import type单独导入Modal的类型，避免和运行时类混淆：

<script setup lang="ts">
// 导入运行时的Modal类，重命名避免冲突
import { Modal as ModalClass } from "bootstrap";
// 仅导入Modal的类型
import type { Modal } from "bootstrap";

// 使用类型注解
let modal: Modal | null = null;

// 示例：初始化模态框
const initModal = () => {
  const modalEl = document.getElementById("your-modal-id");
  if (modalEl) {
    modal = new ModalClass(modalEl);
  }
};
</script>

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