Skip to content

型定義規則

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 関連型には以下のサフィックスパターンを適用します。

サフィックス用途
RequestAPI リクエストパラメータCreateOrderRequest
ResponseAPI レスポンスデータ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 の使用箇所は必ずレビュー対象に含めます。

TIENIPIA QUALIFIED STANDARD