Typescript function returning "is not a function" in browser

Question

I'm very new to Typescript, so bear with me....

I have the following (slightly edited for brevity) *.ts file in my ASP.NET MVC .NET 5 application:

interface IMyFeature {
    setupEventHandlers: () => void;
    handleDurationSelectorChange: () => void;
    fetchReportData: (durationId: number) => void;
}

class MyFeatureCode implements IMyFeature {
    constructor() {
        this.setupEventHandlers();
        this.fetchReportData(0);
    }

    setupEventHandlers(): void {
        $('#durationSelector').change(this.handleDurationSelectorChange);
    }

    handleDurationSelectorChange(): void {
        const durationId: number = Number($(this).find('option:selected').attr("id"));
        this.fetchReportData(durationId);
    }

    fetchReportData(durationId: number): void {
        const url: string = $('#formData').data().the_url;

        $.ajax({
                type: 'GET',
                url: url,
            data: { "reportFor": durationId }
            })
            .done((data: any) => {
                if (data.success === false) {
                    // Panic?
                }
                else {
                    // do something
                }
            })
            .fail((xhr: any, status: any, error: any) => {
                // log something
            })
            .always(() => {
            });
    }
}

const myFeature: IMyFeature = new MyFeatureCode();

To briefly summarise what it does....

1. When the page loads, it calls the function fetchReportData with the value zero to load initial data.
2. When the user changes a combobox/dropdown on the page, we call the same function, but this time passing the selected number.

What works

When the page loads, 'this.fetchReportData(0);` is successfully executed.

What doesn't work

When the user changes the dropdown, we get the correct number in the variable durationId but the line this.fetchReportData(durationId); results in the following error:

myFeature.ts:24 Uncaught TypeError: this.fetchReportData is not a function at HTMLSelectElement.MyFeatureCode.handleDurationSelectorChange (dailyStandup.ts:24) at HTMLSelectElement.dispatch (jquery.min.js:2) at HTMLSelectElement.v.handle (jquery.min.js:2)

So why would the Constructor be able to see it as a function, but my event handler function not?

One other thing (more of an annoyance). In Visual Studio, the IDE is highlighting the "function" names in the interface and in the Class and saying that they're "duplicate identifiers". Any way to stop that? It doesn't seem to affect it building/executing.

Answer 1

[insert relevant meme about javascript and this keyword]

I believe you can fix the error one of two ways:

• bind this:

setupEventHandlers(): void { 
 $('#durationSelector').change(this.handleDurationSelectorChange.bind(this));
}

• use arrow function

setupEventHandlers(): void { 
 $('#durationSelector').change(ev => this.handleDurationSelectorChange(ev));
}