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

【问题标题】：VueJS TypeScript using ChartJS - Parsing error: '}' expectedVueJS TypeScript 使用 ChartJS - 解析错误：'}' 预期
【发布时间】：2020-06-30 08:47:15
【问题描述】：

我在 Vue 中使用 Chart.js。

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

我添加了包含 declare module 'chart.js'; 的 chart.d.ts。

这是错误

它说它希望在第 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
      }
    }
  ]
}

发生了什么事？

【问题讨论】：

我在这里没有看到语法错误。顺便说一句，43:10 表示它在该行中有 10 个字符，这会将错误置于data 和: 之间。不确定那是什么意思。你保存文件了吗？看看是不是没有缓存什么的？
我已经保存了文件并且我已经多次重启了VSCODE
我在 Chrome 而不是 Firefox（我使用的）中打开了有问题的网页，并且它有效。看来你是对的，这似乎是一个缓存问题
现在我在 Chrome 中也遇到了同样的问题，我已经清除了缓存但它没有得到解决...

标签： javascript typescript vue.js chart.js eslint

【解决方案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',
  ],
}

【讨论】：

【解决方案2】：

与此同时，我已经从 .vue 组件文件中的 <script> 标记中删除了 lang="ts"

【讨论】：

【解决方案3】：

tsconfig:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jquery"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

【讨论】：

【解决方案4】：

eslintrc:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/prettier', '@vue/typescript'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prettier/prettier': [
      'warn',
      {
        printWidth: 140,
        jsxBracketSameLine: true,
        singleQuote: true,
        'no-multiple-empty-lines': ['error', { max: 2 }]
      }
    ]
  },
  parserOptions: {
    parser: 'typescript-eslint-parser'
  }
};

【讨论】：