問題一覧に戻る
上級高度なパターンと型
問題93: TypeScript基礎

型安全なReactコンポーネントのためのTypeScript基礎を学びます。propsのインターフェースを定義してコンパイル時にエラーをキャッチします。より良いIDEサポートのために関数パラメータと戻り値を型付けします。TypeScriptは一般的なランタイムエラーを防ぎ、コンポーネント間の明示的な契約を通じてコードの保守性を向上させます。

import React from 'react';

{/* Propsインターフェース定義 */}
interface ButtonProps {
  text: ;
  onClick?: () => ;
  disabled?: ;
}

{/* 型付きReactコンポーネント */}
const Button: React.FC<> = ({ text, onClick, disabled = false }) => {
  return (
    <button onClick={onClick} disabled={disabled}>
      {text}
    </button>
  );
};

{/* Userタイプ定義 */}
interface User {
  id: number;
  name: string;
}

interface UserCardProps {
  user: ;
  onSelect: (user: User) => void;
}

function UserCard({ user, onSelect }: ) {
  return (
    <div onClick={() => onSelect(user)}>
      <h3>{user.name}</h3>
    </div>
  );
}

function App() {
  const user: User = { id: 1, name: 'John' };
  
  return (
    <div>
      <Button text="Click me" onClick={() => console.log('clicked')} />
      <UserCard user={user} onSelect={(u) => console.log(u.)} />
    </div>
  );
}

export default App;