typescript Vue3中的echart類型是什么

Question

我正在使用 Vu3 typescript。 我想將 echarts 注入到組件中。 但是 typescript 一直問我注入的 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: Object is of type 'unknown' for the following code

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

Answer 1

有兩種解決方式，你可以選擇一個方便你的方式

1、如果你使用的是npm，默認ts類型的echarts在單獨的npm package中，你可以嘗試引入它而不是any

npm install --save-dev @types/echarts

2、可以定義adts文件，自己定義類型

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