2021-01-11 01:03

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

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.


  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答


  • weixin_39924674 weixin_39924674 4月前

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

    点赞 评论 复制链接分享
  • weixin_39621819 weixin_39621819 4月前

    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.

    点赞 评论 复制链接分享
  • weixin_39939665 weixin_39939665 4月前

    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.

    点赞 评论 复制链接分享
  • weixin_39955351 weixin_39955351 4月前

    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?

    点赞 评论 复制链接分享
  • weixin_39939665 weixin_39939665 4月前

    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.

    点赞 评论 复制链接分享
  • weixin_39955351 weixin_39955351 4月前

    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.


    import App from './components/app.vue'     // only this line requires the .d.ts .file
    new App( {el : '#app'})
    点赞 评论 复制链接分享
  • weixin_39979080 weixin_39979080 4月前

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

    点赞 评论 复制链接分享