【TypeScript】Propsを型安全に定義する（コンポーネント設計の極意）

// typeを使用する場合 (最近の主流)
type ButtonProps = {
  label: string;
  color: string;
};

// interfaceを使用する場合
interface ButtonProps {
  label: string;
  color: string;
}

const Button = ({ label, color }: ButtonProps) => {
  return <button style={{ backgroundColor: color }}>{label}</button>;
};

type GreetingProps = {
  name: string;
  message?: string; // 渡されなくてもエラーにならない
};

// 分割代入でデフォルト値を設定する
const Greeting = ({ name, message = "こんにちは！" }: GreetingProps) => {
  return (
    <div>
      <p>{name}さん、{message}</p>
    </div>
  );
};

// 呼び出し側
<Greeting name="田中" /> // "田中さん、こんにちは！" と表示される

import React, { ReactNode } from 'react';

type CardProps = {
  title: string;
  children: ReactNode; // childrenにはReactNodeを指定
};

const Card = ({ title, children }: CardProps) => {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-content">{children}</div>
    </div>
  );
};

import React, { MouseEvent, ChangeEvent } from 'react';

type FormProps = {
  // 入力変更時のハンドラ (引数にChangeEventをとる)
  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
  // クリック時のハンドラ (引数にMouseEventをとる)
  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
  // 引数なしのシンプルな関数
  onSubmit: () => void;
};

// 過去によく見られた書き方 (現在は非推奨寄り)
const LegacyComponent: React.FC<MyProps> = ({ title }) => { ... };

const ModernComponent = ({ title }: MyProps) => { ... };

import { ComponentPropsWithoutRef } from 'react';

// buttonタグが持つすべての属性(onClick, disabled, type等)を受け継ぐ
type CustomButtonProps = ComponentPropsWithoutRef<"button"> & {
  variant?: 'primary' | 'secondary'; // 独自のPropsを追加
};

const CustomButton = ({ variant = 'primary', className, ...props }: CustomButtonProps) => {
  const btnClass = variant === 'primary' ? 'bg-blue-500' : 'bg-gray-500';
  
  return (
    // ...props で残りの属性(onClickなど)をすべてbuttonに渡す
    <button className={`${btnClass} ${className}`} {...props} />
  );
};

// inputの標準属性から 'type' と 'onChange' を除外する
type BaseInputProps = Omit<ComponentPropsWithoutRef<"input">, 'type' | 'onChange'>;

type CustomInputProps = BaseInputProps & {
  // typeを2種類に限定して上書き
  type: 'text' | 'password'; 
  // onChangeの引数をEventではなく文字列(value)に変更して上書き
  onChange: (value: string) => void; 
};

type ListProps<T> = {
  items: T[];
  renderItem: (item: T) => React.ReactNode; // itemsの中身の型に依存する
};

// コンポーネント定義に <T,> をつける (TSXでの構文エラー回避のためカンマが必要)
const GenericList = <T,>({ items, renderItem }: ListProps<T>) => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{renderItem(item)}</li>
      ))}
    </ul>
  );
};

// usersの型(User)が自動的に T に当てはまるため、renderItem内の user は型補完が効く
<GenericList
  items={users}
  renderItem={(user) => <span>{user.name}</span>} 
/>

type SuccessAlertProps = {
  type: 'success';
  message: string;
};

type ErrorAlertProps = {
  type: 'error';
  message: string;
  errorId: number; // errorの時だけ必須
};

// 2つの型をユニオン(|)で結ぶ
type AlertProps = SuccessAlertProps | ErrorAlertProps;

const Alert = (props: AlertProps) => {
  if (props.type === 'error') {
    // ここではTypeScriptが props を ErrorAlertProps だと推論するため、errorIdにアクセス可能
    return <div>エラー {props.errorId}: {props.message}</div>;
  }
  return <div>成功: {props.message}</div>;
};