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

Question

我在互联网和堆栈溢出中发现了很多与此相关的问题，但是，问题似乎总是出在 React 上？像这样one ，但是，我正在使用 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 自己的用于导航的预构建组件中得到错误吗？

Answer 1

正如 Jacob 在 this 中的回答Github 问题，我们需要导入我们的组件以获得正确的类型并解决我们的错误，请注意他在最后写道:

请注意，这不是永久修复，只是一种解决方法。

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

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

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

所以我想现在这就是在将组合 API 与 typescript 和 vue-tsc 包一起使用时必须要做的事情