【TypeScript×React】型指定をする時、何の型にすればいいか分からなくなった時の自分流Tips

はじめに

TypeScriptの初心者の方は掲題のような状況には心当たりありませんか？（私はめっちゃあります）
そんなときの自分流のTipsを展開します！

問題

TypeScriptで、引数定義等をする際に、これ何の型を指定するんだっけ？という時の自分なりの解決方法です。
例えば、↓の部分で言う「この部分」のところに何を指定するんだっけ？という場合

Sample.tsx

import { FC } from "react";

export const Sample: FC = () => {
+ const onChangeName = (e: 「この部分」) => {};

  return (
    <form>
      <input type="text" name="name" onChange={onChangeName} />
    </form>
  );
};

解決方法

まず、「この部分」のところに適当な型を入れます(↓では「string」を入れる)。

Sample.tsx

import { FC } from "react";

export const Sample: FC = () => {
+ const onChangeName = (e: string) => {};

  return (
    <form>
      <input type="text" name="name" onChange={onChangeName} />
    </form>
  );
};

そうすると、当然VSCode上でエラーになるので、エラーとなっているinput項目上のonChangeの部分でマウスをホバーします。

すると↑のようなエラーが出ますが、4行目に「型 'ChangeEvent' を型 'string' に割り当てることはできません。ts(2322)」が出ています。
ここで正しい型を表示してくれているので、ChangeEvent〜の部分をコピーしてstringの部分にそのまま貼り付けて、import文を追加します。

Sample.tsx

import { ChangeEvent, FC } from "react";

export const Sample: FC = () => {
  const onChangeName = (e: ChangeEvent<HTMLInputElement>) => {};

  return (
    <form>
      <input type="text" name="name" onChange={onChangeName} />
    </form>
  );
};

するとエラーが消えます！便利！！

おわりに

まあ慣れればいちいちこんなことしなくてもいいんでしょうけど^^;

JISOUのメンバー募集中🔥

プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします！👇