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実装時にこのスキルを参照して、ベストプラクティスと品質基準に従ったコードを書いてください。