// ❌ JS — コールバック・戻り値の形をシグネチャで表現できない

function fetchUser(id, callback) {
  setTimeout(() => {
    callback({ id, name: '山田太郎' }); // このコールバックが何を受け取るか呼び出し元が分からない
  }, 500);
}

fetchUser(42, (user) => {
  console.log(user.name);    // ✅ 運が良ければ動作
  console.log(user.naem);    // ❌ タイプミス — ランタイムでundefined、発見が遅れる
  console.log(user.email);   // ❌ 存在しないフィールド — ランタイムでundefined
});

// setTimeoutの戻り値も型なし
const timerId = setTimeout(() => console.log('tick'), 1000);
clearTimeout(timerId); // ブラウザならnumber、Nodeならオブジェクト — どちらもただの「値」として扱われる

// 非同期関数のシグネチャも貧弱
async function loadOrders(userId) {
  // 戻り値の型がPromise<何>なのか関数本体をすべて読まないと分からない
  const res = await fetch(`/api/orders?u=${userId}`);
  return res.json();
}

// ✅ TS — コールバック・戻り値の形を型で固定する

interface User {
  id: number;
  name: string;
}

// コールバックシグネチャを明示 — (user: User) => void
function fetchUser(id: number, callback: (user: User) => void): void {
  setTimeout(() => {
    callback({ id, name: '山田太郎' });
  }, 500);
}

fetchUser(42, (user) => {
  // userの型がUserとして推論される
  console.log(user.name);  // ✅ 自動補完
  // console.log(user.naem); // ❌ コンパイル拒否 — 'naem'はUserにない
  // console.log(user.email); // ❌ コンパイル拒否 — Userにemailがない
});

// タイマーID — 環境に関わらず安全な推論
const timerId: ReturnType<typeof setTimeout> = setTimeout(
  () => console.log('tick'),
  1000,
);
clearTimeout(timerId);

// 非同期関数シグネチャに戻り値の型を明示
async function loadOrders(userId: number): Promise<Order[]> {
  const res = await fetch(`/api/orders?u=${userId}`);
  return res.json() as Promise<Order[]>;
}

interface Order { id: number; item: string; }

// 呼び出し元 — 戻り値がOrder[]であることをIDEが知っている
loadOrders(42).then((orders) => {
  orders.forEach((o) => console.log(o.item)); // ✅ 自動補完
});