TypeScript Props 関数

TypeScriptを使用してReactアプリケーションを開発する際、Props（プロパティ）はコンポーネント間でデータを受け渡すための重要な機能です。Propsをより型安全に扱うために、TypeScriptの力を借りて関数コンポーネントでPropsを定義する方法について学びましょう。

Propsの基本

Reactコンポーネントには、親から子コンポーネントにデータを渡すために使用されるPropsがあります。これにより、コンポーネント間で情報を共有し、再利用性を高めることができます。

// TypeScriptを使用したPropsの基本的な定義
interface MyComponentProps {
    name: string;
    age: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
    return (
        <div>
            <p>Name: {name}</p>
            <p>Age: {age}</p>
        </div>
    );
};

関数コンポーネントでのPropsの定義

関数コンポーネントを使用する場合、Propsは関数の引数として受け取ります。TypeScriptを使用して、Propsの型を明示的に定義することが重要です。

// 関数コンポーネントでのPropsの定義
interface GreetProps {
    message: string;
}

const Greet: React.FC<GreetProps> = ({ message }) => {
    return <div>{message}</div>;
};

デフォルトPropsとオプショナルProps

TypeScriptでは、Propsをオプショナルにすることや、デフォルト値を設定することができます。これにより、柔軟性を持たせることができます。

// オプショナルPropsとデフォルトPropsの使用例
interface OptionalProps {
    name: string;
    age?: number; // オプショナルなProps
}

const DisplayInfo: React.FC<OptionalProps> = ({ name, age = 25 }) => {
    return (
        <div>
            <p>Name: {name}</p>
            <p>Age: {age}</p>
        </div>
    );
};

まとめ

TypeScriptを使用して関数コンポーネントのPropsを定義することで、コードの安全性が向上し、開発プロセスが効率的になります。Propsの型を正確に定義し、IDEのサポートを活用して、より信頼性のあるReactアプリケーションを構築しましょう。