javascript - VueJS TypeScript 使用 ChartJS - 解析错误：'}' 预期

Question

我在 Vue 中使用 Chart.js。

我 npm 安装了 chart.js 和 @types/chart.js 。

我添加了包含declare module 'chart.js';.

这是错误

它说它希望在第 43 行有一个右大括号，但是在我的代码中，我的 IDE 在第 43 行没有给出任何红线，这通常表示缺少括号。

这是代码：

import Vue from "vue";
import Chart from 'chart.js';

export default Vue.extend({
  name: "CompanyCardComponent",
  components: {
  },
  data() {
    return {
      color: "green" as string
    };
  },
  mounted() {
    const canvas = <HTMLCanvasElement> document.getElementById('myChart');
    const ctx = canvas.getContext('2d');

    const myChart = new Chart(ctx, {
      type: 'bar', <---------------------- Line 43 Line 43 Line 43 Line 43 Line 43
      data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    })
  }
});

这是我的 ESLINT 配置（.eslintrc.js）：

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],A
      env: {
        jest: true
      }
    }
  ]
}

这是怎么回事？

标签： javascripttypescriptvue.jschart.jseslint

Answer 1

我认为问题在于：

const canvas = <HTMLCanvasElement> document.getElementById('myChart');

由于这种情况，您可以使用 as 语法来避免 lint 问题

const canvas = document.getElementById('myChart') as HTMLCanvasElement;

如果您仍然有问题，请检查您的 .eslint.*，我的是这样的：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  plugins: ['vue','typescript'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/essential',
    '@vue/typescript',
  ],
}