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

Posted 2023-03-16

【中文标题】什么是打字稿Vue3中的echart类型

【英文标题】：what is echart type in typescript Vue3

【发布时间】：2022-01-19 23:27:44

【问题描述】：

我正在使用 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' );

【参考方案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');

【讨论】：

感谢您的回答。如果我使用第一种方式，如何导入echart的类型？

只需要导入包，IDE会自动识别

import defineComponent, inject from "vue";导入“@types/echarts”； export default defineComponent( name: "login", components: , setup() const echartsModule: echarts = inject("echarts"); return echartsModule, ; 它告诉我 TS2709: 不能使用命名空间 'echarts'作为一种类型。我仍然不知道哪里出错了...感谢您的回答

你应该阅读如何使用打字稿，我对答案进行了修改

我知道，这是我第一次使用打字稿。我有点不知所措