0

Estou tendo vários problemas ao converter esse trecho de código com jQuery utilizando apenas 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);
  }

Atualmente a conversão está assim:

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;
  }

estou obtendo os seguintes erros: O tipo 'number' não pode ser atribuído ao tipo 'string'. (linhas 36 e 37)

O argumento do tipo 'NodeListOf' não é atribuível ao parâmetro do tipo 'Node'. A propriedade 'baseURI' está ausente no tipo 'NodeListOf'.(linha 28)

4
  • Já corrigi o post, está mais claro e correto agora Commented 18/09/2018 às 14:49
  • Dada a ausência da palavra function para definir a função e o uso do this suspeito que esteja definindo isso dentro de uma classe, correto?
    – Woss
    Commented 18/09/2018 às 14:50
  • Sim, é uma classe Commented 18/09/2018 às 14:53
  • Calma, agora que eu vi... você está utilizando Typescript então?
    – Woss
    Commented 18/09/2018 às 15:03

1 Resposta 1

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;

}

Começando com algumas falhas triviais:

  1. Se buscará pelo id é esperado que seja retornado apenas um elemento, não vários; então ao invés de querySelecorAll, pode utilizar querySelector apenas (ou o getElementById);

  2. Você adicionou body em newDiv; acredito que o correto seria newDiv em body;

  3. Quando utilizar getElementById você não precisa informar o caractere #, apenas o valor do atributo;

  4. Vide 3;

Sobre o erro

O tipo 'number' não pode ser atribuído ao tipo 'string'. (linhas 36 e 37)

Isso vem do Typescript, que leva em consideração os tipos dos dados. Nesse caso, screen.height é um valor numérico, mas element.style.height é uma string. O que você precisa fazer é declarar o cast entre os tipos:

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 ----------------^
4
  • Ao corrigir para if ( document.getElementById('tour-overlay').length === 0) recebi o seguinte erro: A propriedade 'length' não existe no tipo 'HTMLElement'. Commented 18/09/2018 às 15:17
  • Sim, pelo fato de não estar buscando uma lista, só um elemento. Precisará verificar se o retorno não é undefined
    – Woss
    Commented 18/09/2018 às 15:20
  • Em relação ao Cast da variável, ao ser corrigido o erro mudou para O tipo 'number' não pode ser convertido para o tipo 'string'. Commented 18/09/2018 às 15:20
  • O objetivo original era adicionar uma div do tamanho da tela do usuário, porém não posso usar jquery Commented 18/09/2018 às 15:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .