☰

手動で現在の設定をする場合、useRef() フックで使用する TypeScript のタイプは何ですか? 質問する

tag-icon • tag-icon reactjs typescript react-hooks
手動で現在の設定をする場合、useRef() フックで使用する TypeScript のタイプは何ですか? 質問する

Typescript で React ref を可変インスタンスとして使用するにはどうすればよいですか? 現在のプロパティは読み取り専用として型指定されているようです。

私は React + Typescript を使用して、React によってレンダリングされない入力フィールドとやり取りするライブラリを開発しています。HTML 要素への参照をキャプチャし、それに React イベントをバインドしたいと考えています。

  const inputRef = useRef<HTMLInputElement>();
  const { elementId, handler } = props;

  // Bind change handler on mount/ unmount
  useEffect(() => {
    inputRef.current = document.getElementById(elementId);
    if (inputRef.current === null) {
      throw new Exception(`Input with ID attribute ${elementId} not found`);
    }
    handler(inputRef.current.value);

    const callback = debounce((e) => {
      eventHandler(e, handler);
    }, 200);

    inputRef.current.addEventListener('keypress', callback, true);

    return () => {
      inputRef.current.removeEventListener('keypress', callback, true);
    };
  });

コンパイラ エラーが生成されます。semantic error TS2540: Cannot assign to 'current' because it is a read-only property.

私もconst inputRef = useRef<{ current: HTMLInputElement }>();これを試しましたが、次のコンパイラエラーが発生しました:

Type 'HTMLElement | null' is not assignable to type '{ current: HTMLInputElement; } | undefined'.

  Type 'null' is not assignable to type '{ current: HTMLInputElement; } | undefined'.

ベストアンサー1

はい、これは型付けの書き方の癖です:

function useRef<T>(initialValue: T): MutableRefObject<T>;
function useRef<T>(initialValue: T | null): RefObject<T>;
  • initialValueと型パラメータの型がT一致する場合、最初のオーバーライドにヒットし、 が取得されますMutableRefObject<T>。
  • initialValueincludenullと type パラメータの型Tが一致しない場合は、2 番目のオーバーライドにヒットし、不変になりますRefObject<T>。

これを行うと、2 番目のケースに該当します。

useRef<HTMLInputElement>(null)

THTMLInputElementは次のように指定され、タイプのnullは と推論されますHTMLInputElement | null。

最初のケースは次のように実行することで解決できます。

useRef<HTMLInputElement | null>(null)

THTMLInputElement | nullは次のように指定され、タイプのnullは と推論されますHTMLInputElement | null。

おすすめ記事