Subscribe on changes!

Typescript: unable to compile project when returning extended Array<> interface from data()

avatar
Apr 2nd 2021

Version

3.0.11

Reproduction link

https://github.com/danielvy/vue-array.git

See App.vue

Steps to reproduce

run npm run build

What is expected?

Typescript should compile project.

Should be able to assign the array returned from data() to both Array<number> and MyArray types.

What is actually happening?

Typescript compiler complains about assignments of the array returned from data():

TS2739: Type '{ [x: number]: number; length: number; toString: () => string; toLocaleString: () => string; pop: () => number | undefined; push: (...items: number[]) => number; concat: { (...items: ConcatArray<number>[]): number[]; (...items: (number | ConcatArray<...>)[]): number[]; }; ... 25 more ...; flat: <A, D extends number ...' is missing the following properties from type 'number[]': [Symbol.iterator], [Symbol.unscopables]
    17 |
    18 |        mounted() {
  > 19 |                const x: Array<number> = this.array;
       |                      ^
    20 |                const y: MyArray = this.array;
    21 |                console.log(x, y);
    22 |        }

This works as expected with versions prior to Vue 3.0.8

If this is a problem with Vue, can anyone suggest a temporary workaround until this is fixed? I can't change the types since in the actual real project, this is a nested type inside 3rd party library.