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

実現したいこと

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

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

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

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

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

該当のソースコード

Typescript

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

HTML

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