【TypeScript】 HTMLElementに関する型推論

こんにちは。フロントエンドの仲本です。
今回はHTML要素に関する型推論について、一般的な型推論からデファルトでは型推論できない場合の対応方法までを紹介いたします。

要素に対する型推論

まずはHTML要素の一般的な型推論を紹介いたします。

<!DOCTYPE html>
<html lang='ja'>

  <head>
    <meta charset='utf-8'>
    <title>sample htmlelement typescript</title>
  </head>

  <body>
    <div class='example'>divタグです</div>
    <a id='exampleId' href='https://example'>リンクです</a>
    <p>pタグです</p>
    <input type='text' placeholder='textinput'/>
    <script src='bundle.js'></script>
  </body>

</html>

こちらのHTML内の要素を、querySelectorメソッドを使用して取得します。

const a = document.querySelector('a') 
// => HTMLAnchorElement | null 型

const div = document.querySelector('div')
// => HTMLDivElement | null 型

const input = document.querySelector('input')
// => HTMLInputElement | null型

またquerySelectorAllメソッド使用時の型推論も記述いたします。

const a = document.querySelectorAll('a') 
// => NodeListOf<HTMLAnchorElement>型

上記のような結果になります。

上記のコードでは要素名のみを指定していますが、要素名直後にクラスセレクタやIDセレクタを付与すると型推論がうまく効かなくなります。

const div = document.querySelector('div.example')
// => Element | null 型

const a = document.querySelector('a#exampleId')
// => Element | null 型

上記の問題点を解決し型推論可能にしたライブラリが存在しますのでそちらも紹介いたします。

typed-query-selector

typed-query-selectorはTemplate Literal Typeを使ってdocument.querySelectorの引数から返す要素の型を推論するライブラリとなります。
導入から使用例までをいくつか紹介いたします。

導入

導入方法としてまずターミナルで以下を実行します。

$ npm i typed-query-selector

これで完了です。

使用例

次に先ほどと同じコードを使用いたします。

document.querySelector(要素名クラス or IDセレクタ)

import 'typed-query-selector'
// typed-query-selectorをimport

const div = document.querySelector('div.example')
// => HTMLDivElement | null 型

const a = document.querySelector('a#exampleId')
// => HTMLInputElement | null 型

document.querySelector(要素 > 要素)

import 'typed-query-selector'

const div = document.querySelector('body > div.example')
// => HTMLDivElement | null 型

const a = document.querySelector('body > a#exampleId')
// => HTMLInputElement | null 型

このようにtyped-query-selectorを使用すると、クラスセレクタやIDセレクタを付与した状態でも適切な型推論ができるようになりました。

他にも要素取得に関する色々なパターンでの型推論があります。
さらに詳しく学ばれる方は、typed-query-selectorのreadmeを確認していただくか、実際に導入してみて試してみるとより深く学べると思います。