什么是打字稿Vue3中的echart类型

Question

我正在使用 Vu3 打字稿。我想将 echarts 注入到组件中。但是打字稿一直问我注入的 echarts 是什么类型。这就是为什么我使用任何类型作为解决方案的原因。但我认为这不是一个好方法。你们能告诉我什么是 echarts 类型吗？

插件文件（提供 echarts 的地方）：

import * as echarts from "echarts";
import { App } from "vue";

export default {
  install: (app: App) => {
    app.provide("echarts", echarts);
  },
};

组件文件：

<template>
  <div ref="theChart" :style="{ height: '500px' }"></div>
</template>

<script lang="ts">
import { defineComponent, inject } from "vue";

export default defineComponent({
  name: "login",
  components: {},
  setup() {
    const echarts: any = inject("echarts");
    return {
      echarts,
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      //Initialize the echarts instance based on the prepared dom
      let myChart = this.echarts.init(this.$refs.theChart,  null, { renderer: 'svg' });
      //Specify configuration items and data for the chart
      let option = {
        title: {
          text: "ECharts Introductory example",
        },
        tooltip: {},
        legend: {
          data: ["Sales volume"],
        },
        xAxis: {
          data: [
            "shirt",
            "Cardigan",
            "Chiffon shirt",
            "trousers",
            "High-heeled shoes",
            "Socks",
          ],
        },
        yAxis: {},
        series: [
          {
            name: "Sales volume",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      //Use the configuration items and data just specified to display the chart.
      myChart.setOption(option, true);
    },
  },
});
</script>

当我写作时

const echarts = inject("echarts");

显示错误 TS2571：以下代码的对象类型为“未知”

let myChart = this.echarts.init(this.$refs.theChart,  null, { renderer: 'svg' });

Answer 1

有两种解决方式，你可以选择一种方便自己的方式

1、如果你使用npm，echarts的默认ts类型在单独的npm包中，你可以尝试引入它而不是任何

npm install --save-dev @types/echarts

2、你可以定义一个.d.ts文件，自己定义类型

declare module "echarts" {
  //the function or properties you may need to use
}

你用了一个provide,inject，但是没有任何意义，需要的时候可以导入echarts

//@types/echarts does not need to import
import echarts from 'echarts'
app.provide('echarts',echarts);
//you use inject
const echarts = inject<typeof echarts>('echarts');