TypeScriptのインターフェースでAPIレスポンスの型安全性を高める

interfaceとは

TypeScriptにおけるインターフェースは、オブジェクトの「形」を定義する仕組みです。
クラスや関数が従うべき型の契約を定義し、コンパイル時に型の整合性をチェックできます。

PHPのinterfaceとの違い

PHPでも依存性注入などで活用されていますが、TypeScriptとは以下の点が異なります:

• PHP: 実行時にチェック、implementsキーワードが必須
• TypeScript: コンパイル時のみチェック、構造的型付け(Duck Typing)

実践例: ECサイトでの活用

今回は、商品データのAPIレスポンスに型定義を適用してみます。

1. 型定義の作成

types/product.ts

export interface Product {
  id: number;
  name: string;
  imageUrl: string;
  categories: string[];
  isNew: boolean;
  isEvent: boolean;
  price: number;
  originalPrice?: number;  // オプショナル
  discountLabelList: string[];
}

2. APIハンドラーでの使用

// 型エラーの例
export async function getProduct(id: number): Promise<Product> {
  const data: Product = {
    // ... 省略
    price: "9800",  // ❌ string型はnumber型に代入できない
  };
  return data; 
}

3. エディタが教えてくれること

このように、VSCodeなどのエディタが即座に型エラーを検出してくれます。

なぜ型定義が重要なのか

1. バグの早期発見

開発中にエラーを検出できるため、以下のような問題を防げます:

• 本番環境でのランタイムエラー
• データ不整合による予期しない動作
• セキュリティリスク

2. 開発効率の向上

• エディタの自動補完が効く
• リファクタリングが安全にできる
• ドキュメントとしても機能する

3. チーム開発での安全性

• API仕様の共有が容易
• 暗黙的な仕様を明示的に
• レビュー時の確認項目が減る

まとめ

TypeScriptのインターフェースは、開発時の型安全性を高める強力なツールです。
特にAPIを扱う際は、レスポンスデータの型定義を必ず行うことで、
予期しないバグを未然に防ぐことができます。

初期の手間はかかりますが、長期的には開発効率と品質の向上につながります。