型エラー解決方法と変数名の違い

Question

実現したいこと

vscodeで「inputs.style.padding」のstyleの下にエラーが表示されるため、エラーを無くしたい。
as型で解決できるのであればその方法を教えていただきたいです。
加えて、型ガードやユーザー定義型ガードでの解決方法も知りたいです。

また、変数「inputs」をたとえば「hoge」とかに変更すると
hogeの下に下記のようなエラーが表示されます。
hoge: Unknown word.

このエラーの原因は、変数名が型を予測しづらくなるためでしょうか。
Input要素を取得するので、変数名を「inputs」のように
取得する要素に関連付くような変数名にしたほうが良いという認識で合っていますでしょうか。

発生している問題・エラーメッセージ

プロパティ 'style' は型 'NodeListOf<Element>' に存在しません。

該当のソースコード

    const inputs = document.querySelectorAll('.controls input');
    inputs.style.padding = "140px";

<div class="controls">
    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
</div>

試したこと

querySelectorAllで取得する対象が「input」タグなので
HTMLInputElementであることを示せばよいのかと、試したのですが、
エラーであることは変わらないようです。
(inputs as HTMLInputElement).style.padding = "140px";

Answer 1

querySelectorAllで取得する対象が「input」タグなので

違います。エラーメッセージに出ている通りのNodeListOf<Element>、つまり要素のリストなのです。

そもそも、もの自体が違うのでキャストでは解決しません。

• 当該の要素が1つとわかっているなら、querySelectorで1個だけ取得しましょう。
• 複数個存在する場合には、ループを回してリストの中身を1つずつ処理する必要があります。

Comments

[maisumakun]

> また、変数「inputs」をたとえば「hoge」とかに変更すると
hogeの下に下記のようなエラーが表示されます。

2箇所とも書き換えましたか？

[skillUp]

はい。2か所とも書き換えています。
どうやら変数名が3文字までだとエラー表示は出ませんが
4文字以上になると青い波線でエラー表示が出ます。

[skillUp]

しかし、「inputs」は4文字以上ですが、エラー表示が出ません。
「input」でも出ません、「inpu」だとエラー表示が出ます。

Answer 2

.querySelectorAll()で取得できるものは、要素ではなくノードリストです。
ですのでstyleを効かすためには、ノードリストの中身の要素に1つ1つstyleを使わなければなりません。

inputタグが複数ある場合

inputs.forEach(e => e.style.padding = '140px')

1つしかないなら、.querySelector()がいいと思います！

Comments

[skillUp]

ノードリストですね。確かに。
ありがとうございます。

Answer 3

const inputs = document.querySelectorAll<HTMLElement>('.controls input');
inputs.forEach(input => {
  input.style.padding = "140px";
});

とします。なおジェネリクス型パラメータの <HTMLElement> を忘れると inputs は HTMLElement ではなく単なるElement のリストと推論されてしまって、

input.style.padding = "140px";

のところで「Element には styleプロパティが無い」旨のエラーになってしまいます。

Comments

[skillUp]

具体的に示していただき
ありがとうございます。
よく理解できました。

Answer 4

querySelectorAllで取得する対象が「input」タグなので

いえ。違います。

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll
Document の querySelectorAll() メソッドは、与えられた CSS セレクターに一致する文書中の要素のリストを示す静的な (ライブではない) NodeList を返します。

HTML中に１件しか対象がなくてもListで返ります。
inputs[0].style.padding = "140px";のようにして個々のElementを参照する必要があります。
※複数あるならループ回すとか、１件だけ選びたいならquerySelector()への変更を検討してください。

Comments

[skillUp]

1つだけ選ぶのであればinputs[0]でも可能なのですね。
ありがとうございます。

[m.ts10806]

変数がどういう情報を保持しているかデバッグで確認するようにしてみてください。
そうするとどういうプロパティを参照できるのかが見えてきます。