javascript - VueJS/Typescript - No se puede encontrar el módulo './components/Navigation' ni sus declaraciones de tipo correspondientes

Cuando creo un script como typescript (lang="ts") recibo un error que dice

"No se puede encontrar el módulo './components/Navigation' ni sus declaraciones de tipo correspondientes (Vetur 2307)."

Me di cuenta de que esto solo sucede cuando establezco el idioma como ts, que es lo que necesito para construir mi aplicación Vue.

app.vue

<template>
  <Navigation />
</template>

<script lang="ts">
import Navigation from './components/Navigation'; // This is where I get the error message

export default {
  name: 'app',
  components: {
    Navigation,
  }
}
</script>

Navegación.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> 
    <router-link to="/about">About</router-link> 
    <router-link to="/categories">Categories</router-link> 
    <router-link to="/random">Random</router-link>
  </div>
  <router-view />
</template>

<script lang="ts">
export default {
  name: 'Navigation',
}
</script>

Respuesta #1

En la carpeta src añade el archivo shims-vue.d.ts con el siguiente contenido :

Vue 2 :

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

Vue 3:

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

e importa el componente con su extensión .vue :

 import Navigation from './components/Navigation.vue';

en lugar de :

import Navigation from './components/Navigation';