JSX 元素类型"RouterLink"没有任何构造或调用签名



我在整个互联网和堆栈溢出中发现了很多问题,然而,问题似乎总是与React有关?但是,我使用的是Vue,错误发生在Vue自己的组件上,这些组件是我新安装的项目的一部分,用于测试类型和一般类型提示

错误:

src/App.vue:3:6 - error TS2604: JSX element type 'RouterLink' does not have any construct or call signatures.
3     <router-link to="/sales-running">Sales Running</router-link>

package.json

{
"name": "vue-sales-running",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint",
"watch": "build --watch",
"strict": "vue-tsc --noEmit"
},
"dependencies": {
"axios": "^0.27.2",
"core-js": "^3.8.3",
"i": "^0.3.7",
"register-service-worker": "^1.7.2",
"tailwindcss": "^3.0.24",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.3",
"vue-tsc": "^0.37.1",
"vuex": "^4.0.0",
"watch": "^1.0.2"
},
"devDependencies": {
"@types/jest": "^27.0.1",
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-e2e-cypress": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-pwa": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-typescript": "~5.0.0",
"@vue/cli-plugin-unit-jest": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-typescript": "^9.1.0",
"@vue/test-utils": "^2.0.0-0",
"@vue/vue3-jest": "^27.0.0-alpha.1",
"babel-jest": "^27.0.6",
"cypress": "^8.3.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
"prettier": "^2.4.1",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"ts-jest": "^27.0.4",
"typescript": "~4.5.5"
}
}

App.vue(它抱怨的地方)

<template>
<nav class="flex m-auto justify-center">
<router-link to="/sales-running">Sales Running</router-link>
</nav>
</template>
<style lang="scss">
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>

我已经做了一个自定义的strict脚本/命令执行vue-tsc --noEmit命令,这个命令做我所期望的,现在停止我的脚本编译,如果它不匹配预期的类型。

然而,我现在有另一个问题,是我得到错误从Vue自己的预构建组件用于导航?

正如Jacob在这个Github问题中回答的那样,我们需要导入我们的组件来获得正确的类型并解决我们的错误,还请注意他在末尾写道:

请注意,这不是一个永久的修复,只是一个解决方案。

所以基本上我们需要导入我们的组件:

对于App.vue文件,我们现在必须导入底部的组件:

<script setup lang="ts">
import { RouterView, RouterLink } from "vue-router";
{
RouterView;
RouterLink;
}
</script>

所以我猜现在这是必须做的,当使用组合API与typescript和vue-tsc

这个和这个听起来是一个类似的问题。

显然Vue语言功能(Volar)扩展是问题所在,降级到0.36.0

相关内容

最新更新