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

Question

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

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 文件以及我应该如何声明我的所有第三方模块？

我的拖放区组件如下:

<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

这正是 Quasar 中引导文件的设计目的。

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

查看文档，它应该可以帮助您解决这个问题。

例如，这就是我添加 apexcharts 的方式

// src/boot/apexcharts.js

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

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

然后将其添加到 quasar.conf.js 文件中:

  boot: [
    'apexcharts'
  ],