Typescript でcheckbox の値を取得するときに使う型

React Typescript にて複数個あるcheckboxからチェックされているcheckboxのvalueを格納するためのコード

.tsx

  const elements = document.getElementsByName("select");
  let posts :number[]= [];

  for (let i=0; i<elements.length; i++){
//any
//プロパティ 'checked' は型 'HTMLElement' に存在しません。
    const checked :boolean = elements[i].checked;
//any
//プロパティ 'value' は型 'HTMLElement' に存在しません。
    if  (checked){
      const valuenum= Number(elements[i].value); 
      posts.push(valuenum);
    }
  }

なんだこのエラーは？と思い調べてみるとHTMLを取得するための特殊な型定義があるそう。

.tsx

  const elements = document.getElementsByName("select") as  NodeListOf<HTMLElement>;
  let posts :number[]= [];

  for (let i=0; i<elements.length; i++){
//any
//プロパティ 'checked' は型 'HTMLElement' に存在しません。
    const checked :boolean = elements[i].checked;
//any
//プロパティ 'value' は型 'HTMLElement' に存在しません。
    if  (checked){
      const valuenum= Number(elements[i].value); 
      posts.push(valuenum);
    }
  }

何も変わっていない。。。仕方ないのでエンジニア質問サイトに聞いてみた。それでたどり着いたのがこれ。

.tsx

  const elements = document.getElementsByName("select") as NodeListOf<HTMLSelectElement>;
  let posts :number[]= [];

  for (let i=0; i<elements.length; i++){
//any
//プロパティ 'checked' は型 'HTMLElement' に存在しません。
    const checked :boolean = elements[i].checked;
    if  (checked){
      const valuenum= Number(elements[i].value); 
      posts.push(valuenum);
    }
  }

ぐぬぬ... なぜか一つしか消えない。これでもダメなのか。。。　地道に調べてみた結果ようやくたどり着いたのがこれ

参考記事

.tsx

  const elements = document.getElementsByName("select") as  NodeListOf<HTMLInputElement>;
  let posts :number[]= [];

  for (let i=0; i<elements.length; i++){
    const checked :boolean = elements[i].checked;
    if  (checked){
      const valuenum= Number(elements[i].value); 
      posts.push(valuenum);
    }
  }

やっと解決した！初投稿なので大目に見てください。
そんじゃまた！　(´･ω･)ﾉｼ