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

Question

我的基于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 lintfile_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',
}
};

包。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

根据Typescript文档，

…在JSX中使用TypeScript时，只允许使用as-style断言。

(意思是不允许使用尖括号样式的断言)。

尽管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。