querySelectorの返り値の型を絞り込む関数を作る

背景

querySelector(),querySelectorAll()で型がElement,NodeListOf<Element>になって毎回型チェックをするのが手間だなと感じていました。

querySelectorの返り値の型を絞り込む関数

const safeQuerySelector = <T extends Element>(
  root: Element | Document,
  selector: string,
  expectedElementType: { new (): T; prototype: T }
): T | null => {
  const elm = root.querySelector(selector);
  if (elm instanceof expectedElementType) return elm;
  return null;
};

const a = safeQuerySelector(document, "div", HTMLDivElement); //HTMLDivElement|null

今後の課題

第二引数のselectorの文字列がセレクタの構文として問題があるときにnever型で返すようにしたいです。

以前調べた typed-query-selector のstrictモードのようなものです。

最後に

• ジェネリクスを使いこなせるようになりたいです!
• typed-query-selectorのソースが勉強になるので眺めようと思います
• あとはブルーベリー本も読みたいです