TypeScriptはJavaScriptに静的型付けを追加した言語です。 ReactとTypeScriptを組み合わせることで、開発時にエラーを早期発見でき、 大規模なフロントエンド開発でも保守性を高く保てます。

プロジェクトの作成

npx create-react-app myapp --template typescript
cd myapp
npm start

型付きコンポーネントの定義

Propsの型をinterfaceで定義することで、型安全なコンポーネントを作れます。

interface UserCardProps {
  name: string;
  age: number;
  email?: string; // オプショナル
}

const UserCard: React.FC<UserCardProps> = ({ name, age, email }) => {
  return (
    <div>
      <h2>{name}</h2>
      <p>年齢: {age}</p>
      {email && <p>メール: {email}</p>}
    </div>
  );
};

useStateの型指定

const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);

カスタムフックの型付け

カスタムフックにも戻り値の型を明示することで、呼び出し側での補完が効くようになります。

function useCounter(initial: number): [number, () => void, () => void] {
  const [count, setCount] = useState(initial);
  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  return [count, increment, decrement];
}

まとめ

TypeScriptの導入は初期コストがかかりますが、コードの信頼性と開発体験が大きく向上します。 特にチーム開発では型定義がドキュメントの役割も果たし、コミュニケーションコストを下げる効果があります。