3
respostas

Typescript => Entendendo melhor os tipos de manipulação do DOM

Olá,

Pelo que eu havia entendido, no JS tanto faz utilizar o QuerySelectorAll como getElementsByClassName. Nos dois casos eu faço a mesma coisa, mas o QuerySelector como é mais abrangente, por conseguir pegar qualquer elemento, é mais prático de utilizar.

   const el = document.querySelectorAll('.class-name') 
    // é a mesma coisa que
    const el = document.getElementsByClassName('class-name') 

Só que na hora de tipar essas variáveis o VSCode me informa que o getElement é um HTMLCollectionOf<Element> e o QuerySelector é um NodeListOf<Element>. Isso no final das contas acaba sendo muito similar e não tendo muito motivo para eu ficar entendendo melhor cada tipo ? Ou tem relevância entender essas diferenças ?

Ainda sobre os tipos, se eu continuo o código fazendo o seguinte:

const nextEl: ChildNode = <ChildNode>el[i].parentNode?.nextSibling;
        if (nextEl.style.maxHeight) {
          nextEl.style.maxHeight = null;
        } else {
          nextEl.style.maxHeight = nextEl.scrollHeight + 'px';
        }

O VsCode dá um erro dizendo que a propriedade style não pertence ao tipo ChildNode. Porém o atributo parentNode e nextSibling pertencem ao tipo ChildNode (por isso eu restringi o tipo para ChildNode).

Se eu não tipar, continua dando erro. Mas se eu tipar como any compila normalmente e o código funciona como eu gostaria. Mas em tese eu não deveria usar o any, não é ?

3 respostas

Fala ai Enzo, tudo bem? Vamos lá:

Isso no final das contas acaba sendo muito similar e não tendo muito motivo para eu ficar entendendo melhor cada tipo ? Ou tem relevância entender essas diferenças ?

Na real nesse caso não tem muita diferença, basicamente você consegue aplicar 90% das mesmas funções.

A diferença é que o NodeList consegue abrangir uma quantidade de elementos maiores que o HTMLCollection.

Se eu não tipar, continua dando erro. Mas se eu tipar como any compila normalmente e o código funciona como eu gostaria. Mas em tese eu não deveria usar o any, não é ?

Exatamente, nese caso vale você tipar de acordo com o elemento que você conhece, exemplo: HTMLInputElement, HTMLAnchorElement, etc...

Espero ter ajudado.

Entendi, mas qualquer tipo que eu coloque o vscode dá erro.

O que eu estou fazendo nesse código é criando uma variável que vai pegar o botão do html, depois eu faço um EventListener no click que vai mudar a classe css desse elemento para ´active´. E depois eu crio outra váriavel que vai buscar o próximo elemento HTML para também mudar a classe css (e fazer o collapse).

Essa ultima variável é onde está o problema para tipar. Eu imaginava que ela fosse um HTMLElement. Mas o VSCode acusa o erro se eu tipar assim . Eu tentei mudar para Element para ficar mais abrangente, mas também dá erro. Quando eu passo o mouse em cima da variável sem colocar nenhum tipo ela diz que é um ChildNode. Mas se eu tipar com ChildNode também dá erro. O erro se dá ao fazer variavel.style. Esse. style ele acusa que não pertence a classe ELement, HTMLElement ou ChildNode. E portanto o unico jeito que eu consegui fazer funcionar é colocando any. Eu fiz um console.log passando o typeOf dessa variável e me acusa que é um object. Mas se eu tipar assim também não funciona..

Fala Enzo, nesse caso pode ser que o VSCode está pegando uma versão diferente do TypeScript onde as interfaces possuem contratos diferentes.

Tente dar uma olhada nisso.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software