質問: ### 前提・実現したいこと テキストボックスに初期値を設定する場合、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
回答: 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'; } }); ```