How Do I Use Global Vars properly?

strong textI have a pagination script and I am struggling to increment the current page so I can call the next page via AJAX...

In my initial typescript file I am declaring the global VAR like this;

declare var getCurrentPage: number;

then later on in the same file I am defining the value for this from my initial AJAX call

globalThis.getCurrentPage = data && data.startPage;
currentPage: getCurrentPage || 0,

It is defined this way because the currentPage could also be another value, or is set to zero if getCurrentPage fails or doesn't exist.

Now in my pagination file, which is separate to the above (this is because the initial values are derived from the AJAX request), I increment my values like this, then send them back to the global VAR

const nextPage = this.currentPage + 1;
globalThis.getCurrentPage = nextPage;

This however is giving me a nextPage value of 1, and a currentPage value of 0, and every time I press my Next Page button, it keeps giving me a nextPage value of 1 and a currentPage value of 0, because 0 + 1 is 1...

What am I doing wrong?

It seems there is a misunderstanding in how you are handling the global variable getCurrentPage. Based on your description, it looks like the variable currentPage is being set to the value of getCurrentPage at the beginning. Then, when you increment currentPage, you are assigning the incremented value to getCurrentPage, which is not what you want.

Let me clarify the steps you need to take:

1. First, ensure that the global variable getCurrentPage is defined and accessible from both the initial TypeScript file and the pagination file.

2. In the initial TypeScript file, after receiving the data from the initial AJAX call, set the currentPage variable based on the value received from the AJAX response:

    declare var getCurrentPage: number;
    
    // After your AJAX call
    globalThis.getCurrentPage = data && data.startPage;
    const currentPage = getCurrentPage || 0;

3. In the pagination file, increment the currentPage value and then update the global variable getCurrentPage with the new value:

    // In the pagination file
    const nextPage = currentPage + 1;
    globalThis.getCurrentPage = nextPage;

By doing this, you will increment the currentPage value correctly and update the global variable getCurrentPage with the latest value. The next time you click the Next Page button, it should increment the value correctly.

Make sure to check for any other parts of your code that might be affecting the behavior, and ensure that you are not accidentally reinitializing the currentPage variable somewhere else in your code. Also, remember that using global variables should be done with caution as they can lead to unexpected behavior and make the code harder to maintain. Consider using proper encapsulation and scoping techniques to manage state more effectively.