typescriptでテキストボックスの初期値設定時にエラー

Question

前提・実現したいこと

テキストボックスに初期値を設定する場合、javascriptだと設定できるのですが、 typescriptだとエラーが出ます。エラーが出ないようにするにはどのように修正すればよいでしょうか。

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

typescriptだとValueの部分に赤い波線が出て、以下のエラーが出ます。
「[ts] プロパティ 'Value' は型 'Element' に存在しません。」

該当のソースコード

document.getElementsByClassName('XX').namedItem("Title").Value ="test" 

※IDが毎回変わるため、getElementByIdは使えません。

試したこと

typescriptはjsファイルも扱えるとのことなので、該当部分だけ別途jsファイルを作り
tsconfig.jsonに「"allowJs": true 」を追加して参照させたのですが、「error TS5053: Option 'allowJs' cannot be specified with option 'declaration'.」が表示されます。ここからどうすればいいかが不明です。

補足情報（FW/ツールのバージョンなど）

sharepoint frameworkのWebパーツ作成
Visual Studio Code

Comments

[m.ts10806]

問題解決のために参考にした記事はありますか？例えばこの質問とか。　https://teratail.com/questions/103092

[tatenomm]

該当のリンクは確認済みです。他には、https://qiita.com/vvakame/items/31f5c45ff49de67d5634 やhttps://qiita.com/pirosikick/items/183987f8fb79f573ec8b です。googleなどで一通り検索済みです。1日かけても不明なため質問させて頂きました。

Answer 1

チェーンを分割したり、あらかじめ型指定するのもありかもです。

const element: HTMLTextAreaElement  =<HTMLTextAreaElement>document.getElementByClassName('hoge');
element.namedItem("Title").Value ="test" 

Answer 2

Value

「[ts] プロパティ 'Value' は型 'Element' に存在しません。」

エラーメッセージを読む限りでは、Value が怪しいですね。

document.getElementsByClassName('XX').namedItem("Title").Value ="test" 

実際、コードを読んでも、Valueがとてもよく目につくのですが、値を確認してみました？

HTMLTextAreaElement

そして、HTMLTextAreaElement に Value プロパティは存在しますか。

• 4.10.11 The textarea element - HTML Standard
• HTMLTextAreaElement - Web APIs | MDN

Re: tatenomm さん

Comments

[tatenomm]

候補に出て来ないのでvalueがないのはわかっていましたが、どうやってキャストするのか分からず困ってました。
yhgさんの書き方でうまくいきました。
ご助言頂きありがとうございました。

Answer 3

Type Guard を使って HTMLTextAreaElement 型に確定させれば良いんじゃないでしょうか。

const isHTMLTextAreaElement = (x: any): x is HTMLTextAreaElement =>
  typeof x === 'object' && 'value' in x;

const $title = document.getElementsByClassName('XX').namedItem('Title');

if (isHTMLTextAreaElement($title)) {
  $title.value = 'test';
}

---

think49 さんが書いてくれてますが補足しますと、

document.getElementsByClassName('XX').namedItem('Title')

で取得した値は Element 型で、この型は value プロパティを持たないので、
value プロパティを持つ HTMLTextAreaElement 型などとして扱えるように Type Guard を使ってやるわけです。

このテクニックはイベントを受け取ったときの event.target の型確定などにも（個人的には）よく使います。

hoge.addEventListener('foo', event => {
  if (isHTMLTextAreaElement(event.target)) {
    event.target.value = 'foo';
  }
});

Comments

[tatenomm]

ありがとうございます。キャストの方法がわからなかったので困ってました。
ご教示頂いた通りに書いたらうまく設定できました。
普段はコーディングしないのですが、プロトタイプを作るため10年ぶりくらいに一時的にやらなければならず助かりました。どうもありがとうございました。