6-1. Propsの型を定義する

Propsにインターフェースで型を定義する方法を学びます

React - 第4章: TypeScript + React

📚

関連する教科書第4章: TypeScript + React

課題：Propsの型を定義しよう

TypeScriptを使うと、Propsの型を定義して、間違った値が渡されるのを防げます。ユーザーカードコンポーネントにPropsの型を定義してみましょう。

やること

1.UserCardProps インターフェースを定義する
2.プロパティ：name（string）、age（number）、email（string）
3.UserCard コンポーネントでこの型を使う
4.ユーザー情報を表示する

Propsの型定義

インターフェースで型を定義します：

interface UserCardProps {
  name: string;
  age: number;
  email: string;
}

コンポーネントでこの型を使います：

function UserCard({ name, age, email }: UserCardProps) {
  return (
    <div>
      <p>名前: {name}</p>
      <p>年齢: {age}歳</p>
      <p>メール: {email}</p>
    </div>
  );
}

ポイント：型を定義すると、間違った型の値を渡した時にエラーが出るので、バグを防げます。

期待される出力

名前: 田中太郎
年齢: 28歳
メール: [email protected]

// ここにUserCardPropsインターフェースを定義してください
// name: string
// age: number  
// email: string


function UserCard({ name, age, email }) {
  // この行に型を追加してください ↑
  
  return (
    <div style={{ 
      padding: '20px', 
      border: '2px solid #007bff', 
      borderRadius: '8px',
      maxWidth: '400px'
    }}>
      <h3 style={{ marginTop: 0, color: '#007bff' }}>ユーザー情報</h3>
      <p><strong>名前:</strong> {name}</p>
      <p><strong>年齢:</strong> {age}歳</p>
      <p><strong>メール:</strong> {email}</p>
    </div>
  );
}

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <UserCard 
        name="田中太郎"
        age={28}
        email="[email protected]"
      />
    </div>
  );
}

export default App;

Open Sandbox

← 前のレッスン: 5-3. useEffectでタイマーを作る

次のレッスン: 6-2. Stateの型を定義する →