Over-eager inference with ThisType & homomorphic mapped types #18805

Anders Hejlsberg (@ahejlsberg) and I have spoken about this a few times offline, but Brian Terlson (@bterlson) was asking if we had an issue tracking this problem.

We've been working with Vue's API to try to give users a better experience. Unfortunately, this is still a very easy gotcha to fall into.

As a boiled down case, try running the following example with noImplicitAny and noImplicitThis:

type ComputedOf<T> = {
    [K in keyof T]: () => T[K]
}

declare function foo<P, C>(options: {
    props: P,
    computed: ComputedOf<C>
} & ThisType<P & C>): void;

foo({
    props: { x: 10, y: 20 },
    computed: {
        bar() {
            return this.x;
        }
    }
});

Here, you'll get a problem on bar and on the x in this.x, you'll get:

'bar' 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.

Property 'x' does not exist on type '{ bar(): any; }'.

The problem surfaces as soon as any value on this is used in producing the return value of a computed method.

I forget exactly why this occurs, but it has to do with circularities in trying to draw inferences to C which is wrapped in a homomorphic mapped type. Anders Hejlsberg (@ahejlsberg) can fill me in here.

The solution for users is to add a return type annotation to bar which is not obvious, but it prevents type argument inference from type-checking the internals of the method, and avoids the circularity problem. Ideally, users should not have to think about this.