时间戳

首页 > 解决方案 > .vue 文件中的 TypeScript 类型断言似乎让 ESLint 感到困惑

typescript - .vue 文件中的 TypeScript 类型断言似乎让 ESLint 感到困惑

问题描述

我想告诉 TypeScript 将我的 ref 视为一个画布元素，所以我很高兴我调用getContext.

所以我这样做：this.context = (<HTMLCanvasElement>this.$refs.canvas).getContext('2d');

就 ts 而言，现在我很高兴我调用 getContext，但是，现在我收到一个 eslint 错误：

Module Warning (from ./node_modules/eslint-loader/index.js):

D:\Projects\image-parser\image-parser\src\components\CanvasPanScale.vue
  51:32  error  Parsing error: '}' expected

✖ 1 problem (1 error, 0 warnings)

它实际上是指以下几行代码：

this.context = (<HTMLCanvasElement>this.$refs.canvas).getContext('2d');
this.context.imageSmoothingEnabled = false;
if (this.imageToDraw) {
  this.drawImageToCanvas(); // <-- ESLint is angry about this closing parentheses
}

这似乎与我在 .vue 文件而不是 .ts 文件中的事实有关，并且由于同一文件中允许 html 元素和 ts 类型，它会被尖括号混淆吗？删除尖括号确实可以解决它。

我可以通过执行以下操作来修复错误：

const canvas = this.$refs.canvas as HTMLCanvasElement;
this.context = canvas.getContext('2d');
this.context.imageSmoothingEnabled = false;
if (this.imageToDraw) {
  this.drawImageToCanvas();
}

但是我创建一个变量只是为了将其视为画布，我觉得另一种方式不应该破坏 ESLint。有人知道解决这个问题吗？还是我做错了我没有注意到的事情？

标签： typescriptvue.jseslintvue-cli

解决方案

找到答案并想我会发布以防其他人有类似的问题。我错误地为 VSCode 安装了 Vue 扩展包，而它又像其他 8 个插件一样安装。其中一个插件是 ESLint 配置，它完全破坏了 TypeScript linting 和自动完成功能。我确信在那个巨大的插件包中的某个地方我可以找到一些设置来修复它，但我没有处理这个问题，而是卸载了整个包然后只安装了 Vuter。现在一切都很好。

推荐阅读