highcharts - I TypeScript, hur tar jag reda på rätt typ för 'this'?

Just nu kommer mitt exempel från Highcharts-biblioteket, men jag ställer den allmänna frågan eftersom jag skulle vilja veta hur man löser detta för vilket bibliotek som helst.

Mitt kodsnitt är som följer:

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

Jag skulle vilja ta reda på den korrekta typen för 'det här'.

Jag har börjat med att titta på definitionsfilen:

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

Den relevanta koden verkar vara som följer:

interface TooltipOptions extends SeriesTooltipOptions {

...

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

Här fastnar jag lite. Jag har försökt ändra koden till:

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

men det fungerar inte.

Vad gör jag för fel och hur räknar jag ut rätt typ?

Svar #1

Highcharts exporterar de typer du behöver. Gör bara följande:

import Highcharts from 'highcharts`;

...

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

Svar #2

Problemet med att räkna ut typen av detta med dessa funktionsanrop är att tredjeparts-API:et kan binda vilken objekt som helst till det.

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

Inuti funktionen är det lite svårt att specificera typen av detta eftersom det kan vara vad som helst, inklusive något som inte är definierat av deras dokumentation. I ditt specifika fall bör det vara av typen Highcharts.PointObject eller Highcharts.ChartObject vilket du tekniskt sett kan specificera med följande:

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

Problem:

  • Det är inte möjligt att omdefiniera typen av this, så du klonar objektet bara för att få starkare typning.
  • Om det inte finns någon dokumentation, eller om de använder en odokumenterad typ, måste du undersöka this och skriva ditt eget gränssnitt.

Sammanfattning

Det är inte möjligt att bara lägga till starkare typning till this-objektet i en funktion som kallas av tredjepartskod.

Relaterade artiklar