Convert jQuery to Typescript

Question

I am having several problems converting this chunk of code with jQuery using only Typescript.

 function addTourOverlay() {
        if ($('#tour-overlay').length === 0) {
          $('body').prepend('<div id="tour-overlay"></div>');
        }
    resizeOverlay();
  }

  function resizeOverlay() {
    var window_height = $(window).height;
    var window_width = $(window).width;
    $('#tour-overlay').height(window_height).width(window_width);
  }

Currently the conversion is like this:

addTourOverlay2() {
    if (document.querySelectorAll('#tour-overlay').length === 0) {
        let newDiv = document.createElement('div'); 
        newDiv.id = 'tour-overlay';
        let body = document.getElementsByTagName('body');
        newDiv.appendChild(body);
      }
    this.resizeOverlay();
  }

  resizeOverlay() {
    let window_height = screen.height;
    let window_width = screen.width;
    document.getElementById('#tour-overlay').style.height = window_height; 
    document.getElementById('#tour-overlay').style.width = window_width;
  }

I am getting the following errors: The number type cannot be assigned to the string type. (lines 36 and 37)

The argument of type 'Nodelistof' is not attributable to the parameter of type 'Node'. The property 'baseURI' is missing in type 'Nodelistof'. (line 28)

Answer 1

addTourOverlay2() {

  // (1) 
  if (document.querySelectorAll('#tour-overlay').length === 0) {

    let newDiv = document.createElement('div');
    newDiv.id = 'tour-overlay';
    let body = document.getElementsByTagName('body');

    // (2)
    newDiv.appendChild(body);

  }
  this.resizeOverlay();
}

resizeOverlay() {
  let window_height = screen.height;
  let window_width = screen.width;

  // (3 e 4)
  document.getElementById('#tour-overlay').style.height = window_height;
  document.getElementById('#tour-overlay').style.width = window_width;

}

Starting with some trivial flaws:

1. If you search for the id it is expected that only one element will be returned, not several; then instead of querySelecorAll, can use querySelector only (or the getElementById);

2. You added body in newDiv; I believe the right thing would be newDiv in body;

3. When to use getElementById you do not need to inform the character #, only the value of the attribute;

4. See 3;

About the error

The number type cannot be assigned to the string type. (lines 36 and 37)

This comes from Typescript, which takes into account data types. In this case, screen.height is a numerical value, but element.style.height is a string. What you need to do is declare the cast among the types:

document.getElementById('#tour-overlay').style.height = <string> window_height; 
document.getElementById('#tour-overlay').style.width = <string> window_width;
// Aqui você informa o cast da variável ----------------^