Typescript: Computed properties cannot correctly infer even simple return types

[wadetandy]

Version

2.5.13

Reproduction link

https://github.com/wadetandy/vue-computed-typescript-error

Steps to reproduce

After cloning the above repo, run yarn install && yarn dev. Yarn will load webpack and attempt to build the project, at which point the typescript compilation will fail on the ErrorReproduction.vue file. Alternatively, open it up in vscode or something else with good typescript integration to see the same errors.

What is expected?

In the affected file, I would expect all of the computed methods to behave with standard type inference due to their very straightforward return types. Indeed when I access the this member, it shows all data members, methods, and even the correct values for the computed properties themselves!

What is actually happening?

Any time I try to return a data member from the computed properties, the method gives a type error:

doubleNumber implicitly has return type any because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.

and the value itself gives an error:

Property numVal does not exist on type { doubleNumber(): any; whisperedYell(): any; standalone(): string; }.

(note the above no longer includes computed properties or data members)

Additionally, hovering my type view over even the simpleString() method shows a return type of any, even though it should be trivial for vue to figure this type out from the simple string return.

[yyx990803]

This is a known limitation of the type system, you have to manually annotate computed properties. Likely a wontfix, otherwise it would have already been implemented as part of 2.5. @HerringtonDarkholme or @ktsn might be able to provide more insights.

[HerringtonDarkholme]

This is documented in https://vuejs.org/v2/guide/typescript.html#Annotating-Return-Types
There is also an issue tracking the underlying type system improvement, microsoft/TypeScript#18805. However, as Evan has said, it cannot be fixed in Vue side.

[wadetandy]

@yyx990803 @HerringtonDarkholme Thanks for the info here. Will keep an eye on the underlying TS issue.

[Dimava]

For future readers coming from google search:
computed({ get:()=>'', set(value){} }) can infer correct return type and setter value type since Typescript@4.7