Allow $refs to be undefined in Typescript types

[Etheryte]

What problem does this feature solve?

Currently, when you add $refs annotations to a class-based component, the types are defined as follows:

@Component
export default class Foo extends Vue {
    $refs!: {
        bar: Bar;
    };
}

This is handy and allows you to use refs as expected in class methods:

fooMethod() {
    this.$refs.bar.method();
}

However, the types incorrectly assume that the ref is always present, while it might not be so.

async fooMethod() {
    await longApiRequest();
    this.$refs.bar.method();
}

In the above situation, the ref would be undefined if the component unmounted during the async request.

What does the proposed API look like?

The correct types would ideally mark refs as possibly undefined automatically, or alternatively allow the user to do so.

@Component
export default class Foo extends Vue {
    $refs!: {
        bar: Bar | undefined;
    };
}

Currently types don't allow this.

The above types would ensure the user correctly checks for the ref before calling a method on it:

async fooMethod() {
    await longApiRequest();
    this.$refs.bar?.method();
    // -----------^
}

[posva]

The flexibility is better because depending on the case, the ref migh always be present and checking for it to be undefined would be unnecessary

[Etheryte]

@posva I understand the argument for making it opt-in, but I would like to stress the fact that currently it's not possible at all.

This does not compile, because the current types don't allow you to specify undefined here.

$refs!: {
    bar: Bar | undefined; // This is currently not valid, but ideally it would be
};

[posva]

You should open a bug report with a boiled down reproduction at https://github.com/vuejs/vue-class-component then

[Etheryte]

Thanks for the pointer, I didn't file there as that repo is not included in your issue helper options. The progress on this ticket can be followed under vuejs/vue-class-component#415.

[Etheryte]

@posva Upon further inspection, the types stem from this repository, not the class component definition.

They're defined here: https://github.com/vuejs/vue/blob/dev/types/vue.d.ts#L29

Should this ticket be reopened or is there a better course of action I can take to address this?

[jacekkarczmarczyk]

#11112