Vue: Typings with Typescript 2.7.1

[AntoineEsteve]

Version

2.5.13

Steps to reproduce

Create a simple component using Typescript:

import Vue from "vue"

Vue.extend({
    props: {
        myProp: {
            type: Array,
        },
    },
    computed: {
        myComputed(): string {
            return "hello"
        },
        otherComputed(): string {
            return this.myComputed
        },
    },
})

We have the following error:

 TS2322: Type '(() => any) | ComputedOptions<any>' is not assignable to type 'string'.
  Type '() => any' is not assignable to type 'string'.

If we change the type of the prop to String, Number or smtg else we don't have this problem anymore

What is expected?

No error

What is actually happening?

Errors

---

This problem was not happening with the previous Typescript versions (at least 2.5.2)

[HerringtonDarkholme]

I believe this is a bug in TypeScript. For now you can cast it.

import Vue, {PropOptions} from "vue"

Vue.extend({
    props: {
        myProp: {
            type: Array,
        } as PropOptions<any[]>,
    },
    computed: {
        myComputed(): string {
            return "hello"
        },
        otherComputed(): string {
            return this.myComputed
        },
    },
})

[kunalkundaje]

@HerringtonDarkholme Do you know if there's a specific issue in https://github.com/Microsoft/TypeScript/issues that we can track related to this?

[HerringtonDarkholme]

I guess this is the problem of overloading, again.

Commenting out the last of extend overloading signature solves this.

[HerringtonDarkholme]

Boiled down reproduction:

type Prop<T> = { (): T }

declare function test<T>(a: Prop<T>): T
declare function test(a: Prop<any>): {} // toggle this line

var a = test(Array)

a.push

[HerringtonDarkholme]

This issue is now tracked in https://github.com/Microsoft/TypeScript/issues/22471.

There is nothing Vue can do for now. Let's close this and wait for TS team to fix it.

For now you can manually annotate the prop definition as shown above.