jQuery code for Typescript

Question

I am passing a code I had done in jQuery for Typescript, and am having a problem with this function, because of the .filter(), that actually, from what I understand, does not exist in Typescript, only in arrays.

I ask for your help to transform this function to Typescript.

Thank you. In Typescript:

document.getElementById("enter").addEventListener("click", function () {
        (document.getElementById("form-login").querySelectorAll("[required]"), this.closest("form")).filter(function (i, e) {
            return !e.val().trim();
        }).val('');

        (<HTMLInputElement>document.getElementById("numeroSerie")).value = (<HTMLInputElement>document.getElementById("numeroSerie")).value.trim();
        (<HTMLInputElement>document.getElementById("user")).value = (<HTMLInputElement>document.getElementById("user")).value.trim();
        (<HTMLInputElement>document.getElementById("pass")).value = (<HTMLInputElement>document.getElementById("pass")).value.trim();
    });

In jQuery:

$("#enter").on("click", function () {
        $("[required]", $(this).closest("form")).filter(function (i, e) {
            return !$(e).val().trim();
        }).val('');

        $("#numeroSerie").val($("#numeroSerie").val().trim());
        $("#user").val($("#user").val().trim());
        $("#pass").val($("#pass").val().trim());
    });

error:

Uncaught Typeerror: (Document.getElementById(...). querySelectorAll(...) , this.Closest(...)). filter is not a Function At Htmlbuttonelement.

Answer 1

Use the .filter.call() on our list:

document.getElementById("enter").addEventListener("click", function () {
   [].filter.call(document.querySelectorAll("#form-login [required]"), function (e) {
      if(!e.value.trim()) e.value = '';
   });

   (<HTMLInputElement>document.getElementById("numeroSerie")).value = (<HTMLInputElement>document.getElementById("numeroSerie")).value.trim();
   (<HTMLInputElement>document.getElementById("user")).value = (<HTMLInputElement>document.getElementById("user")).value.trim();
   (<HTMLInputElement>document.getElementById("pass")).value = (<HTMLInputElement>document.getElementById("pass")).value.trim();
});

The selector "#form-login [required]" will fetch inside the form#form-login all elements required.