TypeScript `this` Type Information Dosen't Surface Properly in Editor

[waderyan]

From @thoughtentity on September 14, 2016 15:57

TypeScript this Type Information Dosen't Surface Properly in Editor

Environment Information

• VS Code Version: 1.6.0-insiders (f31a4)
• OS Version: Windows 10 1607 (Build 14393.105)
• TypeScript Version: 2.0.2 (Release Candidate)

Problem

In TypeScript 2.0, the shape of this for functions can be described using type annotations. However, the VS Code TypeScript editor does not properly surface this information. The this variable in the function gets typed as any within the function but the editor still enforces that use of this in the function conform to the type information used to describe this for the function. This results in the odd issue of the editor not providing any intellisense for the this due to it being typed as any but still expects it conform to the shape of this described by the this type annotation for the function.

Reproduction

The following minimum TypeScript file will reproduce the issue in VS Code.

index.ts

type ctxA = {
    funB: (paramA: string) => void
}

interface TestObj {

    propA: {
        funA: (this: ctxA) => void
    }

}

let objA: TestObj = {

    propA: {
        funA: function() {
            // errors since funB dosen't match the signature (missing paramA) of funB in ctxA even though the editor types it as any
            this.funB();
        }
    }

}

Expected Result

The VS Code TypeScript editor should properly surface the type information for this in functions and not just type it as any to provide proper intellisense.

Copied from original issue: microsoft/vscode#12032

[waderyan]

@thoughtentity thank you for the excellent bug report. One of the best explained and demonstrated I have seen 👍. I have reproduced. As this issue is a TypeScript language service issue I will migrate to their repo.

[tomwanzek]

This appears to be still an issue with:

• TS 2.1.0-dev.20160913
• VSCode 1.7.1

Replicates as follows:

• this within a typed function context will "appear" as any
• members of this type that exist do not show VSCode error, but will themselves show as type any (there is no language-service support for auto-suggestion)
• trying to use an attribute/method that does not exist on this type, will show an error, including the actual type of this will appear in the mouse-over error tooltip
• Typed assignments are enforced correctly including, those with strictNullChecks active. But flow-dependent type-narrowing will fail.

To elaborate on the last point. Assume the actual this context is SVGSVGElement | null with strictNullChecks active. Inside a callback function with said this context:

function() {
  let that: SVGSVGElement | null = this; // works, although 'this' "appears" to be 'any'
   // let that2: HTMLElement | null = this; // would fail, as expected
   // let that3: SVGSVGElement= this; // would fail, as expected with strictNullChecks

  return that? that.querySelectorAll('g') : []; // works as expected

 // Alternatively, trying to use:
 // return this? this.querySelectorAll('g') : []; // unexpectedly fails, with error `this` "could possibly be null"
}

[tomwanzek]

As of TS 2.2.0-dev.20161129 the issue with this simply appearing as any is resolved. What remains, is the inability to narrow the this type within the function using flow control, regardless of whether one uses if or ?. E.g. with strictNullChecks a this of type SVGSVGElement | null cannot be narrowed down. First assigning this to a equivalently typed local variable and then using the local variable in type narrowing works.