Luego de de nuestra larga búsqueda de información resolvimos este apuro que pueden tener algunos lectores. Te regalamos la respuesta y esperamos resultarte de gran apoyo.
Solución:
El primer archivo ayuda a su IDE a comprender en qué termina un archivo. .vue es
El segundo archivo le permite usar .tsx archivos mientras habilita jsx soporte de sintaxis en su IDE para escribir código mecanografiado al estilo JSX.
Este enlace fue la única explicación decente que pude encontrar. Básicamente tiene que ver con Webpack.
Si no está usando Webpack, solo está usando Typescript, entonces hacer algo como esto es un error:
import Foo from "./Foo.vue";
Porque obviamente Typescript no entiende .vue archivos: en realidad no son módulos Typescript.
Sin embargo, si configura un proyecto Vue, encontrará que lo hace todo el tiempo. ¿Cómo funciona? ¡Paquete web! Por lo que puedo decir (he tratado de evitar la locura aprendiendo algo sobre webpack), este es básicamente el trabajo de Webpack: pasa por todos los import archivos en su Javascript/Typescript, y los “agrupa”, es decir, los fusiona en un solo archivo.
Pero es extensible con “cargadores” (nombre terrible) que se pueden agregar para manejar formatos de archivo particulares. Por ejemplo, puede configurarlo para usar un cargador CSS. Eso significa que cuando encuentra
import "./foo.css"
Incluirá el CSS en la salida y probablemente agregará algo de Javascript para insertarlo en el DOM en tiempo de ejecución, o alguna tontería por el estilo.
De todos modos, también hay (supongo) un cargador para *.vue archivos que se encargan de agruparlos. Asi que es por eso import Foo from "./Foo.vue" obras. ¿Por qué necesitamos el archivo shim?
Porque Typescript todavía no está feliz. No sabe nada sobre Webpack, por lo que aún arrojará un error cuando intente importar Foo.vue (te lo dirá Can't find module "./Foo.vue").
La solucion es shims-vue.d.ts. El nombre del archivo no parece ser importante, siempre que termine con .d.ts. Supongo que Typescript busca todos .d.ts en el mismo directorio o algo así.
En cualquier caso, el contenido es este:
declare module "*.vue"
import Vue from 'vue';
export default Vue;
Lo que básicamente significa, “cada vez que importas un módulo con el nombre *.vue (se admiten comodines), entonces no lo haga, en su lugar, trátelo como si tuviera estos contenidos”.
Así es como parece comportarse para mí: si lo hace import Foo from "./Foo.vue" entonces el tipo de Foo será por Vue. No parece haber una manera de Realmente importar el Foo tipo.
Editar: en realidad creo que funciona * si importa el componente en otro .vue expediente. Si lo importas de .ts entonces obtienes un alias para Vue. ¡Esto es molesto en las pruebas! Hice otra pregunta sobre esto.
Si piensas que te ha sido de ayuda nuestro post, agradeceríamos que lo compartas con más programadores así nos ayudas a difundir nuestra información.