Global variable not accessible using this keyword within specific code snippet in typescript

Question

I have defined a variable globally in typescript, within one function I am not able to get that variable using this keyword

This is my code

imageTemplate.adapter.add("latitude", function(latitude, target) {
  const ctx = target.dataItem.dataContext as any;
  let polygon = this.polygonSeries.getPolygonById(ctx.id);
  if(polygon){
    return polygon.visualLatitude;
   }
   return latitude;
})

Getting error at this.polygonSeries.getPolygonById(ctx.id);. Property polygonSeries does not exist.

This is how I have declared polygonSeries variable

public polygonSeries:any;

How can I solve this issue?

In the below answer in comment box, I came across lots of theory which I don't want. I am looking for solution.

The solution is to use arrow function `(latitude, target) => { ... }` instead of normal `function` declaration. But you should try to understand the theory, to see _why_ this is a solution. — CRice, Jul 17 '20 at 16:43
Thank you. Now I am able to access. You can write your comment as answer. — R15, Jul 17 '20 at 17:03

score 1 · Accepted Answer · edited Jul 18 '20 at 10:44

1

Fixed by replacing function definition with arrow function definition => as below

imageTemplate.adapter.add("latitude", (latitude, target) => {
  const ctx = target.dataItem.dataContext as any;
  let polygon = this.polygonSeries.getPolygonById(ctx.id);
  if(polygon){
    return polygon.visualLatitude;
  }
  return latitude;
})

edited Jul 18 '20 at 10:44

user120242

14,918
3
38
52

answered Jul 18 '20 at 02:19

R15

13,982
14
97
173

Global variable not accessible using this keyword within specific code snippet in typescript

1 Answers1