型定義規則
11.1.1. interface vs type の使用基準
オブジェクトの構造を定義する際は interface を使用します。ユニオン、交差、条件付き型は type を使用します。
typescript
// オブジェクト形態 — interface 使用
interface User {
id: number
name: string
email: string
role: UserRole
}
// ユニオン型 — type 使用
type UserRole = 'admin' | 'editor' | 'viewer'
// 交差型 — type 使用
type AuditableUser = User & { createdAt: Date; updatedAt: Date }
// 条件付き型 — type 使用
type ApiResult<T> = T extends void ? { success: boolean } : { success: boolean; data: T }interfaceは宣言マージが可能であるため、拡張が必要なオブジェクト型に適しています。typeは型演算に特化しているため、単純なオブジェクト定義には使用しません。
11.1.2. 型ネーミング規則
すべての型とインターフェースは PascalCase で命名します。ハンガリアン記法の I プレフィックスは使用しません。
typescript
// 正しい例
interface UserProfile { id: number; displayName: string }
// 誤った例 — I プレフィックス禁止
interface IUserProfile { id: number; displayName: string }API 関連型には以下のサフィックスパターンを適用します。
| サフィックス | 用途 | 例 |
|---|---|---|
Request | API リクエストパラメータ | CreateOrderRequest |
Response | API レスポンスデータ | OrderListResponse |
Dto | レイヤー間データ転送オブジェクト | UserDto |
Params | クエリパラメータ | SearchParams |
11.1.3. 型ファイル管理
型定義ファイルは src/types/ ディレクトリにドメインごとに分離します。各ファイルの型は必ず export します。
src/types/
├── user.ts # ユーザー関連型
├── product.ts # 商品関連型
├── order.ts # 注文関連型
├── common.ts # 共通ユーティリティ型
└── index.ts # バレルファイル(re-export)typescript
// src/types/user.ts
export interface User {
id: number
name: string
email: string
role: UserRole
}
export type UserRole = 'admin' | 'editor' | 'viewer'
// src/types/index.ts
export type { User, UserRole } from './user'
export type { Product } from './product'- コンポーネント専用型は該当 SFC 内に定義することができます。ただし、2つ以上のファイルから参照される型は
src/types/に移動します。
11.1.4. any の使用禁止
any は型安全性を無効化するため使用しません。型を特定できない場合は unknown を使用します。
typescript
// 誤った例
function parseData(raw: any): any {
return JSON.parse(raw)
}
// 正しい例
function parseData(raw: string): unknown {
return JSON.parse(raw)
}ESLint に @typescript-eslint/no-explicit-any: warn ルールを適用します。やむを得ない場合は理由コメントを必須で記述します。
typescript
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- legacy-chart-lib に型定義なし
const chart = new LegacyChart(canvas) as any- 理由コメントなしで
eslint-disableのみ記述することは許容しません。 - コードレビュー時に
anyの使用箇所は必ずレビュー対象に含めます。