將查詢選擇器結果轉換為 vue 組件內的 HTMLElement 時出現編譯錯誤<script lang="ts"> code

Question

我基於 Vuejs 的項目中的組件之一具有以下掛載方法

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

編譯（即 vue-cli-service lint file_path ）失敗並出現錯誤的地方

解析錯誤：意外的令牌，應為“}”
控制台.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-router": "^3.0.1",
    "vue-template-compiler": "^2.5.16"
  }

什么可能導致這個問題？ 順便說一句，運行eslint file_path給出了同樣的錯誤。

Answer 1

根據打字稿文檔，

...當使用帶有 JSX 的 TypeScript 時，只允許使用 as 樣式的斷言。

（意味着不允許使用尖括號樣式的斷言）。

盡管 Vue 中很少使用 JSX，但 Vue 是JSX 兼容的。 這意味着您必須將類型斷言限制為 as 樣式。 換句話說，替換

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

與

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

或者

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

注意：將let替換為const與所提出的問題無關，但如果您從未重新分配給body ，則應使用const 。