0Pricing
React Academy · レッスン

TypeScriptでのEventsとRefsの型付け

DOM操作にReact.ChangeEvent、React.MouseEvent、RefObjectのgenericsを使います。

「TypeScriptでのEventsとRefsの型付け」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

Reactの合成イベント

ReactはネイティブDOMイベントをSyntheticEventでラップします。各イベント型には、React.ChangeEvent<HTMLInputElement>やReact.MouseEvent<HTMLButtonElement>など、専用のジェネリック型があります。

onChangeの型付け

最も一般的なイベントは、入力要素のonChangeです。ハンドラーはReact.ChangeEvent<HTMLInputElement>で型付けします。

function SearchInput() {
  const [value, setValue] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return <input value={value} onChange={handleChange} />;
}

onClickの型付け

ボタンのクリックにはReact.MouseEvent<HTMLButtonElement>を使用します。完全な型情報により、e.currentTarget、e.preventDefault()、e.stopPropagation()にアクセスできます。

function DeleteButton({ onDelete }: { onDelete: () => void }) {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    onDelete();
  };
  return <button onClick={handleClick}>Delete</button>;
}

onSubmitの型付け

フォームの送信にはReact.FormEvent<HTMLFormElement>を使用します。ブラウザーによるデフォルトのページ遷移を止めるため、必ずe.preventDefault()を呼び出します。

function LoginForm() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    const email = (form.elements.namedItem('email') as HTMLInputElement).value;
    console.log(email);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" />
      <button type="submit">Login</button>
    </form>
  );
}

キーボードイベントの型付け

キーボードハンドラーの型付けにはReact.KeyboardEvent<HTMLElement>を使用します。e.key、e.code、e.ctrlKeyにも安全にアクセスできます。

function CommandInput() {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && e.metaKey) {
      submitCommand();
    }
  };
  return <input onKeyDown={handleKeyDown} />;
}

DOM要素に対するuseRef

useRefのジェネリック型にHTML要素の型を渡し、nullで初期化します。これによりTypeScriptは、refがその要素型を保持していることを認識できます。

function AutoFocusInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
}

可変RefとDOM Ref

可変値（DOMノードではない値）を保存する場合は、nullではなく値を使ってuseRefを初期化します。TypeScriptは可変のMutableRefObjectを推論します。

// DOM ref (read-only current)
const divRef = useRef<HTMLDivElement>(null);

// Mutable ref (read-write current)
const countRef = useRef<number>(0);
countRef.current += 1; // ✓ no TypeScript error

useImperativeHandleの型付け

子コンポーネントからref APIを公開する場合は、handle用のインターフェースを定義し、forwardRefとuseImperativeHandleの両方で使用します。

interface DialogHandle {
  open: () => void;
  close: () => void;
}

const Dialog = forwardRef<DialogHandle, { title: string }>((props, ref) => {
  useImperativeHandle(ref, () => ({
    open: () => console.log('open'),
    close: () => console.log('close'),
  }));
  return <div>{props.title}</div>;
});

Refコールバック

refコールバックはDOM要素またはnullを受け取ります。(node: HTMLElement | null) => voidとして型付けします。

function MeasureDiv() {
  const [height, setHeight] = useState(0);

  const measuredRef = (node: HTMLDivElement | null) => {
    if (node) setHeight(node.getBoundingClientRect().height);
  };

  return <div ref={measuredRef}>Content: {height}px tall</div>;
}

Event TargetとCurrent Target

e.targetはイベントを発生させた要素で、e.currentTargetはハンドラーが設定されている要素です。特定のプロパティが必要な場合は、e.targetをキャストします。

const handleClick = (e: React.MouseEvent<HTMLUListElement>) => {
  const target = e.target as HTMLLIElement;
  console.log(target.dataset.id);
};

ジェネリックなイベントハンドラー型

再利用可能なイベントハンドラー関数を記述するには、ジェネリックのReact.EventHandler<Event>を使用するか、完全な関数シグネチャをその場で記述します。

type InputChangeHandler = React.ChangeEventHandler<HTMLInputElement>;

const logChange: InputChangeHandler = (e) => {
  console.log(e.target.value); // e is fully typed
};

クイックチェック

HTMLInputElementを保持するuseRefには、どのTypeScript型を使用すべきですか？

まとめ

React.ChangeEvent、React.MouseEvent、React.FormEventのジェネリック型でイベントハンドラーを型付けします。DOM refはuseRef<HTMLElement>(null)で、可変refは保持する値の型で型付けします。命令型APIには、明示的なhandleインターフェースとforwardRefを使用します。

よくある質問

「TypeScriptでのEventsとRefsの型付け」レッスンは無料ですか？

はい。「TypeScriptでのEventsとRefsの型付け」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「TypeScriptでのEventsとRefsの型付け」で何を学びますか？

DOM操作にReact.ChangeEvent、React.MouseEvent、RefObjectのgenericsを使います。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「TypeScriptでのEventsとRefsの型付け」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. PropsとComponent Return Typesの型付け
  2. TypeScriptでのEventsとRefsの型付け
  3. Generic ComponentsとUtility Types
  4. ContextとCustom Hooksの型付け
← React Academyに戻る