In TypeScript, how do I work out the proper type for 'this'?

Question

At the moment, my example is from the Highcharts library, but I'm asking the general question because I'd like to know how to solve this for any library.

My code snippet is as follows:

tooltip: {
            formatter: function () {
                return this.series.name + "," + this.point.y;
            }
        },

I'd like to work out the proper type for 'this'.

I've started by looking at the definition file:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/highcharts/index.d.ts

The relevant code seems to be as follows:

interface TooltipOptions extends SeriesTooltipOptions {

...

formatter?(): boolean | string;
...
}

Here, I get a little stuck. I've tried modifying the code to:

tooltip: {
            formatter: function (this: Highcharts.TooltipOptions) {
                return this.series.name + "," + this.point.y;
            }
        },

but that doesn't work.

What am I doing wrong and how do I work out the correct type?

Answer 1

Highcharts exports the types you need. Just do the following:

import Highcharts from 'highcharts`;

...

tooltip: {
  formatter(this: Highcharts.TooltipFormatterContextObject) {
    // your code
  }
}

Answer 2

The problem with working out the type of this with these function calls is that the third-party api can bind whatever object it wants to it.

tooltip.formatter.bind(someHighChartsObject);
tooltip.formatter(); // this refers to someHighChartsObject
tooltip.formatter.bind(someOtherHighChartsObject);
tooltip.formatter(); // this refers to someOtherHighChartsObject

Inside of the function, it's a bit difficult to specify the type of this as it could be anything including one not defined by their documentation. In your specific case, it should be of type Highcharts.PointObject or Highcharts.ChartObject which you could technically specify with the following:

const that: Highcharts.PointObject = this;
that.series.name;

Issues:

• It's not possible to redefine the type of this so you're cloning the object just to get stronger typing.
• If there's no documentation, or they use an undocumented type, you have to inspect this and write your own interface.

TL;DR

It's not possible to simply add in stronger typing to the this object in an function that is called by third-party code.