TypeScript Implementation Best Practices

TypeScript実装のベストプラクティス、コーディング規約、パターン集です。型安全で保守性の高いコードを書くための知識ベースとして活用してください。

🎯 Core Principles（コア原則）

1. Type Safety First（型安全性を最優先）

• •anyは使用禁止 → unknownまたは適切な型を使用
• •厳格なTypeScript設定を使用
• •型推論を適切に活用
• •関数パラメータと戻り値には明示的な型を定義

2. Code Quality（コード品質）

• •明確な命名で自己文書化されたコードを書く
• •関数は小さく、単一責任を保つ（Single Responsibility）
• •モダンなJavaScript/TypeScript機能を使用（ES2020+）
• •不要な複雑さを避ける（Keep It Simple）

3. Best Practices（ベストプラクティス）

• •constを優先、letは必要時のみ、varは使用禁止
• •コールバックや短い関数にはアロー関数を使用
• •分割代入とスプレッド演算子を活用
• •オプショナルチェイニング（?.）とnullish coalescing（??）を使用
• •try-catchで適切なエラーハンドリングを実装

4. Code Organization（コード構成）

• •既存のプロジェクト構造とパターンに従う
• •関連する機能をまとめる
• •バレルエクスポート（index.ts）を適切に使用
• •インポートを整理し、最小限に保つ

📚 TypeScript Patterns（詳細パターン集）

詳細なコード例とパターンについては、PATTERNS.mdを参照してください。

Quick Reference

関数定義

// ✅ 明示的な型、明確な目的
function calculateTotal(price: number, taxRate: number): number {
  return price * (1 + taxRate);
}

// ✅ 非同期関数と適切なエラーハンドリング
async function fetchUserData(userId: string): Promise<User> {
  try {
    const response = await fetch(`/api/users/${userId}`);
    if (!response.ok) {
      throw new Error(`Failed to fetch user: ${response.statusText}`);
    }
    return await response.json();
  } catch (error) {
    throw new Error(`Failed to fetch user data: ${error}`);
  }
}

型定義

// ✅ オブジェクトの形状にはinterfaceを使用
interface User {
  id: string;
  name: string;
  email: string;
  role: UserRole;
}

// ✅ Union型や複雑な型にはtypeを使用
type UserRole = 'admin' | 'user' | 'guest';
type Result<T> = Success<T> | Failure;

// ✅ ジェネリック型
interface Repository<T> {
  findById(id: string): Promise<T | null>;
  save(entity: T): Promise<T>;
  delete(id: string): Promise<void>;
}

モダンJavaScript機能

// ✅ 分割代入
const { id, name, email } = user;
const [first, ...rest] = items;

// ✅ スプレッド演算子
const newUser = { ...user, lastLogin: new Date() };
const allItems = [...existingItems, ...newItems];

// ✅ オプショナルチェイニング
const userName = user?.profile?.name;

// ✅ Nullish coalescing
const displayName = userName ?? 'Anonymous';

// ✅ テンプレートリテラル
const message = `Hello, ${name}! You have ${count} messages.`;

✅ Quality Standards（品質基準）

実装したコードは以下の基準を満たす必要があります：

• •✅ TypeScriptエラーなし
• •✅ any型なし（unknownまたは適切な型を使用）
• •✅ try-catchによる適切なエラーハンドリング
• •✅ 明確な変数名と関数名
• •✅ エクスポート関数へのJSDocコメント
• •✅ プロジェクトパターンとの一貫性
• •✅ エッジケースの処理
• •✅ 適用可能な場合はSOLID原則に従う

🔍 Code Review Checklist（コードレビューチェックリスト）

コード実装後、以下を確認してください：

• • すべてのTypeScript型が適切に定義されている
• • any、as any、または危険な型アサーションがない
• • エラーハンドリングが実装されている
• • 関数名・変数名が明確で説明的
• • コードが既存のプロジェクトパターンに従っている
• • 複雑なロジックにJSDocコメントが追加されている
• • エッジケースが処理されている
• • コードの重複がない
• • インポートが整理されている
• • 未使用の変数やインポートがない

🎓 Learning Resources

• •詳細なパターン集: PATTERNS.md
• •TypeScript公式ドキュメント: https://www.typescriptlang.org/docs/
• •TypeScript Deep Dive: https://basarat.gitbook.io/typescript/

このスキルの使い方: TypeScript実装時にこのスキルを参照して、ベストプラクティスと品質基準に従ったコードを書いてください。