Quasar TypeScript项目中第三方模块dropzone-vue声明配置问题咨询

1. 类型声明文件配置 #

• 存放位置：在项目src目录下新建types文件夹，在该文件夹中创建dropzone-vue.d.ts文件
• 写入以下代码即可完成声明：

declare module 'dropzone-vue' {
  import type { DefineComponent } from 'vue'
  const DropZone: DefineComponent<any, any, any>
  export default DropZone
}

如果不需要严谨的类型校验，也可以写最简声明：

declare module 'dropzone-vue'

• 打开项目根目录的tsconfig.json，在include数组中添加声明文件匹配规则，确保TS能够识别：

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/types/**/*.d.ts" // 新增该规则
  ]
}

你也可以选择直接把声明语句写到项目已有的src/shims-vue.d.ts或env.d.ts文件末尾，不需要单独建文件夹和文件。

2. 组件注册（适配Quasar框架机制） #

Quasar没有默认main.js入口，官方提供boot文件机制用来注册全局插件、组件：

• 若需要全局使用Dropzone组件，在src/boot目录下新建dropzone.ts文件：

import { boot } from 'quasar/wrappers'
import DropZone from 'dropzone-vue'
import 'dropzone-vue/dist/dropzone-vue.common.css' // 必须引入样式文件否则组件样式异常

export default boot(({ app }) => {
  app.component('DropZone', DropZone)
})

• 打开根目录的quasar.config.js，在boot配置项中注册刚才的文件：

module.exports = configure(function () {
  return {
    // 其余配置省略
    boot: [
      'dropzone' // 新增该条目
    ]
    // 其余配置省略
  }
})

配置完成后重启开发服务，即可在所有组件中直接使用<drop-zone />标签，无需重复导入。如果你只需要在单个页面使用该组件，不需要配置boot文件，仅完成类型声明配置后直接在组件内import即可。

无类型第三方模块通用声明方案 #

所有没有对应@types/xxx类型包的第三方JS模块，都可以用以下方法快速声明：

• 所有模块声明可以统一放在src/types/global.d.ts文件中，也可以每个模块单独建一个模块名.d.ts文件
• 最简通用声明（模块导出内容为any类型）：

declare module '你的第三方模块名'

• 如需自定义类型提示，可以根据模块的实际导出规则补全类型定义即可。

内容的提问来源于stack exchange，提问作者Otorrinolaringologista -man