TypeScriptのフロントエンド・バックエンドでの使い方｜メリット・デメリット

import React, { useState } from "react";

// ✅ Propsの型定義
type CounterProps = {
  title: string;       // タイトル（必須）
  initialCount?: number; // 初期値（任意）
};

// ✅ コンポーネント本体
const Counter: React.FC<CounterProps> = ({ title, initialCount = 0 }) => {
  // ✅ Stateの型推論（useState<number>で型を明示）
  const [count, setCount] = useState<number>(initialCount);

  const handleIncrement = () => setCount(count + 1);
  const handleDecrement = () => setCount(count - 1);

  return (
    <div style={{ padding: "1rem", border: "1px solid #ccc", width: 200 }}>
      <h2>{title}</h2>
      <p>現在のカウント: {count}</p>
      <button onClick={handleIncrement}>＋</button>
      <button onClick={handleDecrement}>−</button>
    </div>
  );
};

export default Counter;

import React from "react";

// ✅ Propsの型定義
type User = {
  id: number;
  name: string;
  email: string;
};

type HomeProps = {
  user: User;
};

// ✅ Next.js ページコンポーネント
const HomePage: React.FC<HomeProps> = ({ user }) => {
  return (
    <main style={{ padding: "1.5rem", fontFamily: "sans-serif" }}>
      <h1>Welcome, {user.name}!</h1>
      <p>Email: {user.email}</p>
    </main>
  );
};

// ✅ サーバーサイドでデータ取得（Next.js 13: getServerSideProps）
export async function getServerSideProps() {
  // 本来はAPIやDBから取得
  const user: User = {
    id: 1,
    name: "Naoko",
    email: "naoko@example.com",
  };

  return {
    props: {
      user,
    },
  };
}

export default HomePage;