What is TypeScript's ThisType used for?

Question

TypeScript comes with an interface ThisType. I couldn't find much documentation on it, so I'm wondering: what is it used for? How do I use it? How does it work?

Answer 1

ThisType is documented here: https://www.typescriptlang.org/docs/handbook/utility-types.html#thistypet (thanks to @axiac for linking that in the comments)

However, the example the docs use feels a bit convoluted to me. This is the easiest way I've found to think about it:

If you add & ThisType<WhateverYouWantThisToBe> to the type of an object, the functions within that object will have WhateverYouWantThisToBe as the type used for this. This is helpful if you can't otherwise specify what this should be through the normal TypeScript mechanisms (it's not a class, etc.)

If we imagine a world where we're writing some code that registers some helper functions, you could write it like this:

interface HelperThisValue {
    logError: (error: string) => void;
}

let helperFunctions: { [name: string]: Function } & ThisType<HelperThisValue> = {
    hello: function() {
        this.logError("Error: Something went wrong!"); // TypeScript successfully recognizes that "logError" is a part of "this".
        this.update(); // TS2339: Property 'update' does not exist on HelperThisValue.
    }
}

registerHelpers(helperFunctions);

As I've indicated in the comments above, TypeScript now knows the correct type, and will give errors if we misuse it.

Note that like all of TypeScript's typings, using ThisType has no effect on the resulting JavaScript code. There must be code elsewhere that ensures that when the members of helperFunctions get called, the proper this value is set (e.g. through use of Function.bind, Function.apply, Function.call, etc.)