使用 TypeScript 在 Quasar 中声明第三方模块答案

【问题标题】：Declaring third party modules in Quasar with TypeScript使用 TypeScript 在 Quasar 中声明第三方模块
【发布时间】：2021-12-06 21:15:43
【问题描述】：

我试图在我的类星体上使用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 文件放在哪里，我应该如何声明我的所有第三方模块？

我的 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>

【问题讨论】：

标签： typescript vue.js quasar-framework quasar vue-dropzone

【解决方案1】：

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

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

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

例如，这是我添加顶点图表的方式

// 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'
  ],

【讨论】：

【解决方案2】：

如果找不到d.ts文件，那么通常只能在/src/目录下声明一个xxx.d.ts文件，并在其中引入module声明。

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

【讨论】：