typescript - JSX öğe türü 'RouterLink' herhangi bir yapıcı veya çağrı imzasına sahip değil

İnternette ve Stack Overflow'da bununla ilgili birçok sorun buldum, ancak sorun her zaman React ile ilgili gibi görünüyor? Bu gibi bir durumda, ancak ben Vue kullanıyorum ve hata, tipleri ve genel olarak tip ipuçlarını test etmek için oluşturduğum yeni kurulmuş bir projenin parçası olan Vue'nun kendi bileşenlerinde meydana geliyor.

Hata:

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 (Şikayet ettiği yer)

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

Ben, vue-tsc --noEmit komutunu çalıştıran özel bir strict script/komut yaptım, bu komut benim beklediğim şekilde çalışıyor ve artık tiplerin beklenenden farklı olması durumunda scriptimin derlenmesini durduruyor.

Ancak şimdi başka bir sorunum var, o da gezinme için kullanılan Vue'nun kendi önceden derlenmiş bileşenlerinden hatalar almam.

Cevap #1

Jacob bu Github sorununa yanıt verirken, doğru türleri elde etmek ve hatalarımızı çözmek için bileşenlerimizi içe aktarmamız gerektiğini söylüyor, ayrıca son olarak şunu yazdığını da unutmayın:

Unutmayın, bu kalıcı bir çözüm değil, sadece geçici bir çözüm yoludur. :

Yani temel olarak bileşenlerimizi içe aktarmamız gerekiyor:

Artık App.vue dosyası için bileşenleri aşağıda içe aktarmamız gerekiyor:

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

Yani sanırım şimdilik, composition API'yi TypeScript ve vue-tsc paketi ile kullanırken yapılması gerekenler bunlar

Cevap #2

Bu ve bu benzer bir sorun gibi geliyor.

Görünüşe göre sorunun kaynağı Vue Language Features (Volar) eklentisi, 0.36.0 sürümüne düşürün