モジュールと型のインポート/エクスポート

// 名前付きエクスポート（1ファイルに複数OK）
export function formatDate(date: Date): string {
  return date.toLocaleDateString('ja-JP');
}
 
export const MAX_RETRY = 3;
 
export type User = {
  id: string;
  name: string;
};

// デフォルトエクスポート（1ファイルに1つ）
export default function Button({ label }: { label: string }) {
  return <button>{label}</button>;
}

// 名前付きインポート
import { formatDate, MAX_RETRY } from './utils';
import { User } from './types';
 
// デフォルトインポート（好きな名前で受けられる）
import Button from './Button';
 
// 名前付き + デフォルトを同時に
import Button, { type ButtonProps } from './Button';
 
// 別名をつける
import { formatDate as formatJaDate } from './utils';

// 値と型のインポートを分ける
import { fetchUser } from './api';
import type { User } from './types';
 
// inline type import（1行にまとめる書き方）
import { fetchUser, type User } from './api';

// ❌ import type を使わない場合
import { User } from './types';
// コンパイル後: import { User } from './types';
// → 実行時に ./types を読み込もうとする（中身は空なのに）
 
// ✅ import type を使う場合
import type { User } from './types';
// コンパイル後: （この行は消える）
// → バンドルサイズが小さくなる

// class は型としても値としても使える
class User {
  constructor(public name: string) {}
}
 
const user: User = new User('Alice');  // User は型でもあり、コンストラクタ（値）でもある

// enum も型と値の両方の名前空間を持つ
enum Status {
  Active = 'active',
  Inactive = 'inactive',
}
 
const s: Status = Status.Active;  // 型としても値としても使える

// type は型の名前空間のみ
type Color = 'red' | 'blue';
// const c = Color;  // ❌ エラー: Color は型であり、値として使えない

// types/user.ts
export type User = { id: string; name: string; email: string };
export type CreateUserInput = { name: string; email: string };
 
// types/product.ts
export type Product = { id: string; title: string; price: number };
 
// types/index.ts（バレルファイル）
export type { User, CreateUserInput } from './user';
export type { Product } from './product';

// 使う側 — 1箇所からまとめてインポートできる
import type { User, Product } from '@/types';

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

// ❌ 相対パスが深い
import { Button } from '../../../components/ui/Button';
import type { User } from '../../../types/user';
 
// ✅ パスエイリアスですっきり
import { Button } from '@/components/ui/Button';
import type { User } from '@/types/user';