CODEWITHSUNDEEP
javascripttypescriptvar
Mark
Mark

Reputation: 1613

TypeScript var scoping

So I started working with TypeScript recently and I'm enjoying it so far, but there is a problem that I simply can't understand why it's not working properly.

the "var" keyword is still accessible in TypeScript naturally and I know that it's a function scope, versus block scope for the "let" keyword. I have the following code and I can't figure out why it's not working:

 class Calendar {
      month: number;
      months: string[];
      weekday: number;
      day: number;
      constructor() {
        this.month = date.getMonth();
        this.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'November', 'December'];
        this.weekday = date.getDay();
        this.day = date.getDate();
      }
      nextMonth() {
        var months = this.months;
        var currentmonth: number = this.month;

        el('.icono-caretRight').addEventListener('click', () => {
          currentmonth = (currentmonth + 1) % months.length;
        }, false);

        month = currentmonth;
        return month;
      }
      previousMonth() {
        el('.icono-caretLeft').addEventListener('click', () => {
          month--;
        }, false);
      }
    }

let calendar = new Calendar();
let month = calendar.month;
let nextmonth = calendar.nextMonth();
console.log(nextmonth);

Look at the nextMonth() function. I don't know why the "month" variable is not being incremented. What exactly am I doing wrong here?

Note: I'm using JSPM + TypeScript (the plugin-typescript).

Thanks in advance!

Upvotes: 1

Views: 151

Answers (1)

basarat
basarat

Reputation: 276239

the "var" keyword is still accessible in TypeScript naturally and I know that it's a function scope, versus block scope for the "let" keyword. I have the following code and I can't figure out why it's not working:

Your understanding of scoping is correct.

The following code does work: 

class Calendar {
      month: number = 0;
      months: string[];

      constructor() {
        this.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'November', 'December'];
      }
      nextMonth() {
        var months = this.months;
        var currentmonth: number = this.month;
        currentmonth = (currentmonth + 1) % months.length;
        month = currentmonth;
        return month;
      }
    }

let calendar = new Calendar();
let month = calendar.month; // 0
let nextmonth = calendar.nextMonth();
console.log(nextmonth); // 1

I suspect you are confused about month vs. this.month AND / OR addEventListener vs. actually calling the function.

More

Based on the user comment:

I understand that the this.month is 0 since well the date.getMonth() is actually 0. My problem in that is doesn't want to increment, probably I don't get the addEventListener part of the function or maybe like you said I'm confused, because it's suppose to increment on click correct? It has to return a new value everytime the user clicks right? Or... Not sure anymore though

The code 

el('.icono-caretRight').addEventListener('click', () => {
          currentmonth = (currentmonth + 1) % months.length;
        }, false);

Is probably something you want to do in the constructor. And most likely you want : 

el('.icono-caretRight').addEventListener('click', () => {
   this.nextMonth();
}, false);

Upvotes: 1

Related Questions