add example of $ref casting to any in documentation

[jraller]

If using ref on an element in a template and expecting to reference it with this.$ref one needs to change it to the proper element type or to any in order to access properties of the referred element (this.$refs.checkboxElement as HTMLFormElement).checked. The error error TS2339: Property 'checked' does not exist on type 'Vue | Element | Vue[] | Element[]' will be encountered otherwise.

[kaorun343]

Please see here.
This is the complete solution still 2019.

https://github.com/vuejs/vue/blob/dev/types/test/vue-test.ts#L23

class YourComponent extends Vue {
  $refs!: {
    checkboxElement: HTMLFormElement
  }

  someMethod () {
    this.$refs.checkboxElement.checked
  }
}

[ktsn]

PR welcome 🙂

[grzegorztomasiak]

Anyone has idea why overriding $refs throws such a crazy errors in TypeScript when compiling the project?

ERROR in /var/www/local.studio/app/Resources/public/app/Common/Components/Sortable/Sortable.Component.vue.ts
(12,1): error TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type '<V extends VueClass>(target: V) => V' is not assignable to type 'typeof Sortable'.
    Property 'config' is missing in type '<V extends VueClass>(target: V) => V'.

ERROR in /var/www/local.studio/app/Resources/public/app/Common/Components/Sortable/Sortable.Component.vue.ts
(13,22): error TS2415: Class 'Sortable' incorrectly extends base class 'Vue'.
  Property '$refs' is private in type 'Sortable' but not in type 'Vue'.

Here's my component:

<template>
    <ul ref="ul">
        <li v-for="item in items">{{ item.name }}</li>
    </ul>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component, Prop} from 'vue-property-decorator';
    import * as SortableJs from 'sortablejs/Sortable.js'

    @Component
    export default class Sortable extends Vue
    {
        @Prop({'default': null})
        public items:Array<Object>;

        public $refs = {
            ul: HTMLElement
        };

        public mounted()
        {
            //let el = document.getElementsByTagName('ul');
            console.log(this.$refs.ul)
            /*SortableJs.create(el, {
                animation: 150,
                onEnd: function (event) {
                    console.log(event.oldIndex);
                    console.log(event.newIndex);
                }
            });*/

            /*this.items = [
                {name:"John"},
                {name:"Joao"},
                {name:"Jean"}
            ];*/
        }
    }
</script>

[304NotModified]

FYI, this is also an option:

  someMethod () {
     (this.$refs["checkboxElement"] as HTMLElement).checked
  }

better then an any "cast" IMO

[wonderful-panda]

@grzegorztomasiak

public $refs = {
    ul: HTMLElement
};

Probably, this must be

public $refs: {
    ul: HTMLElement
};

Use $refs: instead of $refs =.

[qm3ster]

Is there a way to extend the original definition of $refs instead of overwriting it?
Edit: I settled on

{
  $refs: Vue["$refs"] & {
    input: HTMLInputElement
  }
}

[zhangbobell]

Thanks @qm3ster, I'm facing the same problem. besides this, I have to augment the module declarations import from npm packages. On the other hand, @304NotModified's code will works when there is no augmentation.

Thank you all.

[samiconductor]

For some reason, my component import resolves to type Vue like @ktsn expected here. Perhaps it's because I split up my Vue files into separate html/ts/scss?

To get around this, I had my component implement an interface with whatever methods I wanted to call elsewhere and used a union type for the ref. It's verbose but it works.

export default interface MyMethods {
  method(): void
}

import Vue from 'vue'
import Component from 'vue-class-component'
import MyMethods from './MyMethods'

@Component
export default class MyMethodsComponent extends Vue implements MyMethods {
  method() {
    console.log('method called')
  }
}

import Vue from 'vue'
import Component from 'vue-class-component'
import MyMethodsComponent from './MyMethodsComponent.vue'
import MyMethods from './MyMethods'

@Component({
  components: {
    MyMethodsComponent
  }
})
export default class MyComponent extends Vue {
  $refs: {
    myMethods: MyMethodsComponent & MyMethods
  }

  mounted() {
    this.$refs.myMethods.method()
  }
}

[ffxsam]

None of the above works. $refs is not valid:

Property '$refs' has no initializer and is not definitely assigned in the constructor.
[tslint] The class property '$refs' must be marked either 'private', 'public', or 'protected' (member-access)
(property) HelloWorld.$refs: {
    test: MyComponent;
}

If I add private in front of $refs, other errors show up:

[lisztj]

$refs: {
validate: HTMLFormElement
}

[ffxsam]

Nope.