Method does't exist in $ref component

[cawa-93]

Example:

// Child component
@Component

export default class CommentForm extends Vue {
  public focus() {
    return 1;
  }
}

// Parent component
import CommentForm from '@/components/comment-form.vue';

@Component({
  components: {CommentForm},
})

export default class Comments extends Vue {
  @Ref() readonly commentField!: CommentForm;

   public tryFocus() {
        this.commentField.focus(); // <- Error: TS2339: Property 'focus' does not exist on type 'Vue'.
    }
}

[kaorun343]

@cawa-93 Hi.

This issue is caused by the type definition of *.vue file, and not caused by vue-property-decorator. *.vue files are defined to export Vue.

I recommend you to ask this question at Vue's official forum or its discord server.

Here is my solution. I usually separate component definition into .vue and .ts.

<script>
// CommentForm.vue
import CommentForm from './CommentForm'

export default CommentForm
</script>

// CommentForm.ts
@Component
export default class CommentForm extends Vue {
  public focus() {
    return 1;
  }
}

<script>
// Comments.vue
import Comments from './Comments'
import CommentForm from  '@/components/comment-form.vue'

export default Comments.extend({
  components: { CommentForm }
})
</script>

// Comments.ts
import CommentForm from '@/components/comment-form';

@Component
export default class Comments extends Vue {
  @Ref() readonly commentField!: CommentForm;

   public tryFocus() {
        this.commentField.focus(); // no error
    }
}

[duola8789]

I also encountered this problem, do you have any solutions except separating component definition into .vue and .ts?

[jyork03]

I'm also experiencing this issue and would like to find a solution that doesn't require separating the component definition into multiple files.

Given the example from @cawa-93 :

export default class Comments extends Vue {
  @Ref() readonly commentField!: CommentForm;

   public tryFocus() {
        this.commentField.focus(); // <- Error: TS2339: Property 'focus' does not exist on type 'Vue'.
    }
}

I would expect this.commentField to be recognized as type CommentForm, which extends Vue and has the method focus() defined, and not as it's ancestor type: Vue.

EDIT Excuse my ignorance, I'm just starting to learn typescript... Alright, I believe this behavior is a result of the declaration file shims-vue.d.ts. It causes all *.vue files to be exported as Vue types. @kaorun343 stated as much, but I (and possibly others) didn't quite understand exactly what he meant. The contents of the file are:

declare module '*.vue' {
  import Vue from 'vue';

  export default Vue;
}

Anyway, I've found a couple ways around it.

1. Using // @ts-ignore. In my editor (Webstorm), this preserves Go To Definition functionality

   @Component
   export default class Comments extends Vue {
   @Ref() readonly commentField!: CommentForm;
   
   public tryFocus() {
       // @ts-ignore
       this.commentField.focus(); // no error
   }
   }

2. Import it as any type. This breaks Go To Definition functionality

   @Component
   export default class Comments extends Vue {
   @Ref() readonly commentField!: any;
   
   public tryFocus() {
       this.commentField.focus(); // no error
   }
   }

3. Create an interface for the component class and set the Ref to the interface type. This might be the typescript-purist way to handle this, but it also adds a lot of overhead.

   // components/types/index.ts
   export interface CommentFormInterface {
   focus: () => number;
   }

   // Child component
   @Component
   export default class CommentForm extends Vue implements CommentFormInterface {
   public focus() {
   return 1;
   }
   }

   
   import CommentForm from '@/components/comment-form.vue';
   import { CommentFormInterface } from '@/components/types';

@Component({ components: { CommentForm }, }) export default class Comments extends Vue { // @Ref() readonly commentField!: CommentFormInterface; // Go To Definition navigates to interface definition // or @Ref() readonly commentField!: CommentForm & CommentFormInterface; // Go To Definition navigates to CommentForm component definition.

public tryFocus() { this.commentField.focus(); // no error } }

4. Merge the type.  This might be repetitive, but it carries less boilerplate than option 3. It also breaks `Go To Definition`
```ts
@Component
export default class Comments extends Vue {
  @Ref() readonly commentField!: CommentForm & { focus: () => number };

   public tryFocus() {
        this.commentField.focus(); // no error
    }
}

As for me, I'll probably just go with option 1 and silence the issue with // @ts-ignore since this is an issue caused by the declaration in shims-vue.d.ts. Until something better comes along, and Vue components can export itself intact, everything will be a work-around anyways.

[macfilho2]

I did handle this issue as following: Create a type with a property $el as a HTMLElement

export type VueComponent = { $el: HTMLElement }

And use solution 4 from @jyork03:

@Component
export default class Comments extends Vue {
  @Ref() readonly commentField!: CommentForm & VueComponent

   public tryFocus() {
        this.commentField.focus(); // no error
    }
}

Thus you don't need to write all the HTMLElement methods and properties