[英]Compilation error on casting query selector result to HTMLElement inside a vue component's <script lang="ts"> code
One of components in my Vuejs based project has the following mounted method我基于 Vuejs 的项目中的组件之一具有以下挂载方法
mounted() {
try {
let x = 'abc';
console.log(x);
let body = <HTMLElement> document.querySelector("body");
} catch (e) {
console.log(e);
}
}
where the compilation (ie vue-cli-service lint file_path ) is failing with error编译(即 vue-cli-service lint file_path )失败并出现错误的地方
Parsing error: Unexpected token, expected "}"
解析错误:意外的令牌,应为“}”
console.log(e);控制台.log(e);
......................^......................^
My eslintrc.js looks like this (with babel-eslint as the parser)我的 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 has following dependencies 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"
}
What could be causing this issue ?什么可能导致这个问题? Btw, running eslint file_path gives the same error.
顺便说一句,运行eslint file_path给出了同样的错误。
According to Typescript Documentation ,根据打字稿文档,
...when using TypeScript with JSX, only as-style assertions are allowed.
...当使用带有 JSX 的 TypeScript 时,只允许使用 as 样式的断言。
(Meaning angle-bracket-style assertions are not allowed). (意味着不允许使用尖括号样式的断言)。
Even though JSX usage in Vue is rare, Vue is JSX compatible .尽管 Vue 中很少使用 JSX,但 Vue 是JSX 兼容的。 Meaning you have to limit your type assertions to as-style.
这意味着您必须将类型断言限制为 as 样式。 In other words, replace
换句话说,替换
let body = <HTMLElement> document.querySelector("body");
with either与
const body = document.querySelector("body") as HTMLElement;
or或者
const body: HTMLElement = document.querySelector("body");
Note: replacing let
with const
is irrelevant for the question being asked, but if you never reassign to body
, you should use const
.注意:将
let
替换为const
与所提出的问题无关,但如果您从未重新分配给body
,则应使用const
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.