ReactでTypeScriptを活用する際には、型を適切に定義することで型安全性を高めることが重要です。この章では、関数コンポーネントに型を付ける方法やPropsとStateの型定義、コンポーネント間での型安全なPropsの受け渡しについて解説します。

関数コンポーネントに型を付ける

関数コンポーネントを作成する際にTypeScriptを使用することで、Propsの型を明確に定義し、予期しないバグを防ぐことができます。

基本例

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

この例では、nameプロパティが必須で文字列型であることを保証しています。

React.FCを使わない場合

React 18以降では、React.FCの使用が推奨されない場合があります。その場合、次のように型を定義します。

interface GreetingProps {
  name: string;
}

const Greeting = ({ name }: GreetingProps) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

PropsとStateの型定義

コンポーネントで使用されるPropsやStateに型を定義することで、データの流れを明確にし、コードの信頼性を高めることができます。

Propsの型定義

Propsは親コンポーネントから渡されるデータです。以下は、Propsに型を付ける例です。

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

Stateの型定義

Stateはコンポーネント内で管理されるデータです。useStateを使用する場合、型を明示することで、状態の変更を安全に管理できます。

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

コンポーネント間のPropsの受け渡し

親コンポーネントから子コンポーネントにデータを渡す際に、Propsの型を定義することで安全性が向上します。

例: 親から子へのデータ受け渡し

interface User {
  id: number;
  name: string;
}

interface UserCardProps {
  user: User;
}

const UserCard: React.FC<UserCardProps> = ({ user }) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>ID: {user.id}</p>
    </div>
  );
};

const App = () => {
  const user = { id: 1, name: 'John Doe' };

  return <UserCard user={user} />;
};

export default App;

この例では、Userインターフェースを使用してuserオブジェクトの構造を明確にしています。

子コンポーネントと型安全な設計

子コンポーネントを作成する際に型安全性を保つことで、メンテナンス性が向上します。たとえば、特定の型のPropsを受け入れるコンポーネントを設計する際に役立ちます。

子コンポーネントの再利用例

interface ListItemProps {
  text: string;
}

const ListItem: React.FC<ListItemProps> = ({ text }) => {
  return <li>{text}</li>;
};

interface ListProps {
  items: string[];
}

const List: React.FC<ListProps> = ({ items }) => {
  return (
    <ul>
      {items.map((item, index) => (
        <ListItem key={index} text={item} />
      ))}
    </ul>
  );
};

const App = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return <List items={items} />;
};

export default App;

この例では、Listコンポーネントが複数のListItemコンポーネントを安全に使用しています。