Typescript 将查询选择器结果强制转换为vue组件内的HtmleElement时出现编译错误';s<;脚本lang=";ts"&燃气轮机;代码

Typescript 将查询选择器结果强制转换为vue组件内的HtmleElement时出现编译错误';s<;脚本lang=";ts"&燃气轮机;代码,typescript,vue.js,vue-cli,type-assertion,babel-eslint,Typescript,Vue.js,Vue Cli,Type Assertion,Babel Eslint,基于Vuejs的项目中的一个组件具有以下安装方法 package.json具有以下依赖项 "dependencies": { "@amcharts/amcharts4": "^4.6.1", "@sentry/browser": "^5.17.0", "@sentry/integrations": "^5.17.0", &qu

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

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文件路径会产生相同的错误。

根据

…将TypeScript与JSX一起使用时,只允许作为样式断言

(表示不允许使用角括号样式的断言)

尽管在Vue中很少使用JSX,但Vue却是如此。这意味着您必须将类型断言限制为as样式。换言之,替换

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


注意:将
let
替换为
const
与所问问题无关,但如果您从未重新分配到
body
,则应使用
const

@tao
const body:HTMLElement=document.querySelector(“body”)工作!你让我开心。谢谢你!顺便说一句,另一个建议
constbody=document.querySelector(“body”)作为HTMLElement不起作用。它给出了以下错误:
解析错误:意外标记,应为“
,错误指针正好位于
as
关键字处。@oomer,我刚刚注意到。您的
typescript
版本已旧。更新它。我建议至少使用
3.9.7
。你会得到很多好东西,(大部分来自
3.7
)。也就是说:可选的链接、空合并操作符等等,但是这两个对任何使用它们的人来说都是巨大的生产力提升。另一个旁注:
typescript
不应该是依赖项(在运行时不需要)。将其移动到
devdependency
(您将减小捆绑包大小)。
"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"
  }
let body = <HTMLElement> document.querySelector("body");
const body = document.querySelector("body") as HTMLElement;
const body: HTMLElement = document.querySelector("body");