Typescript "this" issue

Question

I am new with typescript. Trying to create an abstract class for html form. I want to execute some custom code on form submit. Therefore, assigning a function to this.onsubmit. Problem is, the submit method requires the first parameter to be "this" but I need "this" to access class members as well.

export abstract class AbstractForm {
 protected form: HTMLFormElement;

 constructor(form: HTMLFormElement) {
    this.form = form;
    this.form.onsubmit = this.Submit;
 }

 private Submit(this: HTMLElement, ev: Event) {
    if (this.PreSubmissionValidation()) { // Error
        // Some code
    }
    ev.preventDefault();
 }
 abstract PreSubmissionValidation(): boolean;
 abstract OnSuccess(): any;
 abstract OnError(): any;
}

What about just binding? this.form.onsubmit = this.Submit.bind(this);? I advise against calling your first parameter this - very confusing, as it's not the value of this in the context of AbstractForm. — Jefftopia
– Jefftopia, Commented Mar 25, 2018 at 15:04
I'm really curious why there's has a parameter that HAS to be called this... ? What tech lead is gonna let this happen? — a2345sooted
– a2345sooted, Commented Mar 26, 2018 at 5:41

Amit Hasan · Accepted Answer · 2018-03-25 16:38:46Z

3

Could do something ugly like this instead:

private readonly Submit = (() => {
    const instance = this;
    return function (this: HTMLElement, ev: Event) {
        if (instance.PreSubmissionValidation()) {

        }
    }
})();

edited Mar 25, 2018 at 16:38

Amit Hasan

1,4502 gold badges16 silver badges34 bronze badges

answered Mar 25, 2018 at 14:58

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Amit Hasan Over a year ago

"this" is brilliant.

Amit Hasan Over a year ago

Works perfectly.

Tao Over a year ago

This won't work actually, this parameters are removed by the TypeScript compiler. See my answer.

brunnerh Over a year ago

@Tao: I checked the compiled code, it works just fine.

Tao Over a year ago

Yeah, you're right, sorry... I shouldn't be posting today, second mistake from my side already...

|

Collectives™ on Stack Overflow

Typescript "this" issue

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related