Typescript doesn't infer type of component imported from .vue

[jiayexie]

On this import statement:

import myComponent from ./myComponent.vue

myComponent has the type of Vue. When I "go to defintion" on this symbol, it goes to Vue type declaration instead of going to myComponent.vue file.

Is there a way to resolve this? I'm trying to switch from ts files to single file components but this seems like a regression compared to working with ts files.

[ningliaoyuan]

I've seen the same problem.

And the declare below makes all imported component lose the component option type details. All objects are Vue type but actually should be Vue.ComponentOptions

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

[rhyek]

Also, is there no way to avoid having to use the .vue extension? With Webpack's resolve I can import a component located at src/components/users/index.vue with import Users from 'src/components/users'.

Not a huge issue, of course, but nice to have.

[DanielRosenwasser]

Unfortunately, we can't avoid the .vue extension right now.

Also, you're not going to get a great experience with TypeScript & Vue unless you use Vue.extend. Because of that, the best thing we can say is that you end up with a Vue constructor.

We'll try to discuss among the team how to make the SFC experience better.

[KokoDoko]

The issue with the .vue extension makes working with typescript almost impossible. Even with the example from this repository, and using Vue.extend there is still no intellisense for import statements.

If I import a non-existing .vue file I get no error:

import Vue from "vue";
import Nonsense from "./notexisting/nonsense.vue"         // this is allowed...?
export default Vue.extend({
})

Not only that. but changing code in a .vue file is not reflected by intellisense in other vue files unless I restart VS Code.

This is all caused by the .d.ts file. When I leave it out everything works as it should. I can't imagine that working with Vue and Typescript is still not possible by now?

[DanielRosenwasser]

I don't know how respond to your question other than by just stating that it's not an easy problem to solve and we have finite resources. This starter provides several different options for organizing your files. If you want, you have your <script> tags point to their respective .ts file, and write your code there. That way you can omit the .vue extension.

What it comes down to right now is that you can get self-contained internal validation within a component, but you're unfortunately limited in any validation across those components.

[KokoDoko]

Would there be a way to make this single import statement work without the declaration.d.ts file? Kickstarting the root vue component from the index.ts file is the only place where the declaration is really needed.

index.ts

import App from './components/app.vue'     // only this line requires the .d.ts .file
new App( {el : '#app'})

[elevatebart]

If you guys use vue-template-loader you get type inference back.