在 vue 组件的 <script lang="ts"> 代码中将查询选择器结果转换为 HTMLElement 时出现编译错误

问题描述

我基于 Vuejs 的项目中的一个组件具有以下 mounted 方法

mounted() {
  try {
    let x = 'abc';
    console.log(x);
    let body = <HTMLElement> document.querySelector("body");
  } catch (e) {
    console.log(e);
  }
}

编译 (i-e vue-cli-service lint file_path) 因错误而失败

解析错误：意外标记，应为“}”
console.log(e);
......................^

我的 eslintrc.js 看起来像这样（使用 babel-eslint 作为解析器）

module.exports = {
  root: true,env: {
    node: true,},extends: [
    'plugin:vue/essential',],rules: {
    quotes: ['error','single']
  },parserOptions: {
    parser: 'babel-eslint',}
};

package.json 具有以下依赖项

"dependencies": {
    "@amcharts/amcharts4": "^4.6.1","@sentry/browser": "^5.17.0","@sentry/integrations": "^5.17.0","@types/node": "^10.12.9","@vue/cli-plugin-eslint": "^3.0.0-rc.3","@vue/cli-plugin-typescript": "^3.0.0-rc.3","@vue/cli-plugin-unit-mocha": "^3.0.0-rc.3","@vue/cli-service": "3.9.3","axios": "^0.15.3","element-ui": "^2.8.2","har-validator": "^5.1.3","less-loader": "^4.1.0","lodash": "^4.17.2","moment": "^2.20.1","typescript": "^3.0.1","vee-validate": "^2.1.0-beta.7","vue": "^2.5.16","vue-authenticate": "^1.4.1","vue-class-component": "^6.0.0","vue-debounce": "^2.0.0","vue-froala-wysiwyg": "^2.9.1","vue-property-decorator": "^6.0.0","vue-router": "^3.0.1","vue-typeahead": "^2.3.0","vuedraggable": "^2.21.0","vuescroll": "^4.16.1","vuetify": "1.1.0","vuex": "^3.0.1","vuex-router-sync": "^3.0.0","vuex-saga": "^0.1.3"
  },"devDependencies": {
    "@types/chai": "^4.1.0","@types/jest": "^23.3.10","@types/mocha": "^2.2.46","@types/webpack-env": "^1.15.2","@vue/eslint-config-typescript": "^3.0.0-rc.3","@vue/test-utils": "^1.1.0","babel-core": "^6.26.0","babel-jest": "^22.1.0","babel-loader": "^7.1.2","babel-polyfill": "^6.26.0","babel-preset-env": "^1.6.1","babel-preset-es2015": "^6.24.1","babel-preset-stage-2": "^6.24.1","babel-preset-stage-3": "^6.24.1","chai": "^4.1.2","dotenv": "^6.0.0","faker": "^4.1.0","file-system": "^2.2.2","flush-promises": "^1.0.2","jasmine-core": "^3.3.0","jest": "^22.1.4","jest-vue": "^0.8.2","jquery": "^3.5.1","less": "~3.9.0","lint-staged": "^6.0.0","regenerator-runtime": "^0.11.1","ts-jest": "^23.0.1","vue-jest": "^3.0.2","vue-template-compiler": "^2.5.16"
  }

是什么导致了这个问题？顺便说一句，运行 eslint file_path 会出现同样的错误。

解决方法

根据Typescript Documentation，

...当在 JSX 中使用 TypeScript 时，只允许使用 as 样式的断言。

（意思是尖括号样式的断言是不允许的）。

尽管 Vue 中很少使用 JSX，但 Vue 是 JSX compatible。这意味着您必须将类型断言限制为 as-style。换句话说，替换

let body = <HTMLElement> document.querySelector("body");

其中之一

const body = document.querySelector("body") as HTMLElement;

或

const body: HTMLElement = document.querySelector("body");

注意：将 let 替换为 const 与所提出的问题无关，但如果您从未重新分配给 body，则应使用 const。