typescript - 使用 TypeScript 在 Quasar 中声明第三方模块

Question

我正在尝试在我的 quasar 上使用Dropzone-vue，但显然我不能简单地安装它并在 main.js 文件中声明它，因为 quasar 没有。我还收到以下错误：

Could not find a declaration file for module 'dropzone-vue'. 'c:/Users/me/Desktop/my-project/node_modules/dropzone-vue/dist/dropzone-vue.common.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/dropzone-vue` if it exists or add a new declaration (.d.ts) file containing `declare module 'dropzone-vue';`Vetur(7016)

我尝试了建议的命令，但它不受支持，因此我将 .d.ts 文件放置在哪里，以及我应该如何声明所有第三方模块？

我的 dropzone 组件如下：

<template>
  <q-page padding>
    DropZone
    <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
      <drop-zone
        :maxFiles="Number(10000000000)"
        url="http://localhost:5000/item"
        :uploadOnDrop="true"
        :multipleUpload="true"
        :parallelUpload="3"/>
    </div>
  </q-page>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Dropzone from 'dropzone-vue';


export default defineComponent({
  components: {
    Dropzone,
  },
  setup() {
    return {

    };
  },
})
</script>

Answer 1

This is exactly what bootfiles are designed for in Quasar.

https://quasar.dev/quasar-cli/boot-files

Check the docs, it should help you solve this.

For example, this is how I added apexcharts

// src/boot/apexcharts.js

import { boot } from 'quasar/wrappers';
import VueApexCharts from 'vue3-apexcharts';

export default boot(({ app }) => {
  app.use(VueApexCharts);
});

Then you add it to the quasar.conf.js file:

  boot: [
    'apexcharts'
  ],

Answer 2

If the d.ts file cannot be found, then usually only a xxx.d.ts file can be declared under the directory /src/, and the module declaration will be introduced in it.

// /src/global.d.ts
declare module "dropzone-vue";