progress要素のonClickイベントに表示されるTypeScriptエラーを解決したいです。

Question

progress要素をクリックすると、progress要素の長さとクリックした位置をコンソールに表示するものを作っています。
下記がデモです。
CodeSandBox

現状、progress要素のonClickに下記のエラーが表示されます。
下記のエラーはVSCodeで表示されるものです。

型'({ target, pageX, }: { target: { getBoundingClientRect(): ClientRect; offsetWidth: number;}; pageX: number; }) => void'を型'(event: MouseEvent<HTMLProgressElement, MouseEvent>) => void'に割り当てることはできません。

パラメーター'__0'および'event'は型に互換性がありません。
型'MouseEvent<HTMLProgressElement, MouseEvent>'を型'{ target: { getBoundingClientRect(): ClientRect; offsetWidth: number; }; pageX: number; }' に割り当てることはできません。
プロパティ 'target'の型に互換性がありません。
型'EventTarget'には型'{ getBoundingClientRect(): ClientRect; offsetWidth: number; }'からの次のプロパティがありません: getBoundingClientRect, offsetWidthts(2322)
index.d.ts(1455, 9): 予期された型は、型 'DetailedHTMLProps<ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>' に対してここで宣言されたプロパティ 'onClick' から取得されています

以上のエラーを解決したいです。
ただし、エラーが出ているものの機能はしています。

ソースコード

export default function App() {
  const getPoint = ({
    target,
    pageX
  }: {
    target: {
      getBoundingClientRect(): ClientRect;
      offsetWidth: number;
    };
    pageX: number;
  }) => {
    const pos = target.getBoundingClientRect();
    console.log(target.offsetWidth);
    console.log(pos.left);
    console.log(pageX);
  };
  return (
    <>
      <progress onClick={getPoint} max="100" />
    </>
  );
}

Answer 1

コンパイルエラーを直すには

• getPoint を progressタグの onClick イベントに代入できるようにその型として定義する(型: ProgressOnClick)
• 引数の分割代入をしている target は EventTarget 型として定義されておりそのままでは getBoundingClientRect, offsetWidth のプロパティは定義されておらずコンパイルエラーになるので代わり currentTarget を使う

type ProgressOnClick = JSX.IntrinsicElements['progress']['onClick'];

export default function App() {
  const getPoint: ProgressOnClick = ({ currentTarget, pageX }) => {
    const pos = currentTarget.getBoundingClientRect();
    console.log(currentTarget.offsetWidth);
    console.log(pos.left);
    console.log(pageX);
  };
  ....
}

target vs currentTarget はこちらに詳しく書かれています
https://qiita.com/sitilma/items/f26f5d16e455a0c68071

---

局面によっては currentTarget ではなく target を使いたい場合もでてくるかもしれません．そういった場合は target をそのタグの型へキャストして使う，もしくは堅牢に実装するならタイプガードを使って書くと良いと思います．

type ProgressOnClick = JSX.IntrinsicElements['progress']['onClick'];

export default function App() {
  // target 使いたい場合(targetをキャストするパターン)
  const getPoint: ProgressOnClick = ({ target, pageX }) => {
    const pos = (target as HTMLProgressElement).getBoundingClientRect();
    console.log((target as HTMLProgressElement).offsetWidth);
    ...
  }
}

type ProgressOnClick = JSX.IntrinsicElements['progress']['onClick'];

const isHtmlProgressElement = (target: EventTarget): target is HTMLProgressElement =>
  'getBoundingClientRect' in target && typeof target['getBoundingClientRect'] === 'function' &&
  'offsetWidth' in target;

export default function App() {
  // target 使いたい場合(タイプガードを使うパターン)
  const getPoint: ProgressOnClick = ({ target, pageX }) => {
    if (!isHtmlProgressElement(target)) {
      return;
    }
    
    const pos = target.getBoundingClientRect();
    console.log(target.offsetWidth);
    ...
  }
}

Comments

[evgenia]

無事解決できました。正直ご回答いただいた内容に不明点が多いですが、その分勉強するべき部分が明確になりました。ありがとうございました。