1. Reactで型エラーが出る理由

ReactとTypeScriptを組み合わせると、PropsやStateに「型」というルールが加わります。型とは「このデータは何の種類か」を示す目印です。

これは、文房具に名前シールを貼るようなものです。ハサミの箱に鉛筆を入れようとすると違和感がありますが、型エラーも同じように「それは違いますよ」と教えてくれます。

2. Propsでよくある型エラー

Propsで多いのは、渡すデータの種類が合っていないエラーです。文字を渡す予定なのに、数字を渡してしまうと発生します。


type MessageProps = {
  text: string;
};

function Message(props: MessageProps) {
  return <p>{props.text}</p>;
}

export default Message;

このコンポーネントは、文字だけを受け取る約束になっています。違う種類のデータを渡すと、TypeScriptが教えてくれます。

3. Stateの初期値が原因の型エラー

Stateでは、最初に入れる値がとても重要です。最初の値を見て、ReactとTypeScriptは「このStateはこの型だ」と判断します。


import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>カウント：{count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

export default Counter;

ここでは数字だけを扱うStateだと明確にしています。これにより、間違って文字を入れるミスを防げます。

（画面に「カウント：0」と表示され、ボタンを押すたびに数字が増えていきます）

4. nullやundefinedによる型エラー

「まだデータがない状態」を表すために、nullやundefinedを使うことがあります。これを考えずに使うと型エラーになります。

これは、中身が入っていない箱から物を取り出そうとするような状態です。TypeScriptは「本当に入っていますか？」と確認してくれます。

5. フォーム入力で起きやすい型エラー

入力フォームでは、入力された値をStateで管理します。このとき、イベントの型が分からずエラーが出ることがあります。


import React, { useState } from "react";

function NameForm() {
  const [name, setName] = useState<string>("");

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>入力された名前：{name}</p>
    </div>
  );
}

export default NameForm;

（文字を入力すると、その内容が画面に表示されます）

ここでは「文字を扱うState」だと決めているため、入力内容も安全に管理できます。