TypeScriptのインターフェースを学ぼう｜実例付き

（最終更新月：2023年11月）

以下のような疑問をお持ちの方に向けて書かれています

当記事でお伝えすること

• TypeScriptのインターフェースの基礎
• 効果的な定義方法や実践的な使用例
• わかりやすい説明と例

TypeScriptでの型安全なプログラミングを実現するために、インターフェースは非常に重要な役割を果たします。

ぜひ、この機会にインターフェースの全容を理解し、TypeScriptの可能性を広げていきましょう。

TypeScriptインターフェース入門

こちらでは、TypeScriptのインターフェースについて学びます。

インターフェースを理解することで、コードの構造と型安全性を向上させられるでしょう。

• インターフェースとは？
• TypeScriptのインターフェースの役割
• インターフェースを学ぶメリット

インターフェースとは？

TypeScriptのインターフェースは、オブジェクトが特定の構造を持っていることを明示するための強力なツールです。

基本的には、プロパティやメソッドの名前と型を定義するために使用します。

たとえば、次のコードはシンプルなインターフェースの例です。

interface User {
  name: string;
  age: number;
}

上記のUserインターフェースは、nameプロパティがstring型で、ageプロパティがnumber型であるオブジェクトを表しています。

TypeScriptはコード内でUserインターフェースに違反するオブジェクトが使われないよう型チェックをおこなえます。

TypeScriptのインターフェースの役割

TypeScriptのインターフェースは、開発における型の統一性を保証し、コンパイル時のエラー検出を可能にします。

インターフェースは、クラスの実装前に契約として機能するため、開発者間での合意形成に役立つでしょう。

例えば、以下のインターフェースは関数のパラメータとして利用できます。

interface Point {
  x: number;
  y: number;
}

function printPoint(point: Point) {
  console.log(`X: ${point.x}, Y: ${point.y}`);
}

この関数printPointは、Pointインターフェースに準拠した任意のオブジェクトを受け取ります。

インターフェースを用いることでどのような値が関数に渡されるかを明確にし、誤った型が渡された場合にはコンパイルエラーを発生させるのです。

インターフェースを学ぶメリット

TypeScriptのインターフェースを学ぶことには、多数のメリットがあります。

• プログラムにおけるデータの形を事前に宣言することで、より安全にコードを書ける
• インターフェースはコードの自己文書化機能を果たすため、ほかの開発者がコードを読む際の理解を助けられる

インターフェースの書き方

こちらでは、基本的なインターフェースから配列型にインターフェースを適用する方法まで、TypeScriptにおけるインターフェースの書き方を詳しく見ていきます。

• 初歩から理解: 基本的なインターフェースの構文
• 応用: 関数パラメータとしてのインターフェースの使い方
• より詳細に: オブジェクト型でインターフェースを使う方法
• 配列型にインターフェースを活用する方法

初歩から理解: 基本的なインターフェースの構文

インターフェースの基本的な書き方は直感的です。

上記で示したUserインターフェースは最もシンプルな形式ですが、オプショナルなプロパティや読み取り専用のプロパティも含められます。

interface Employee {
  readonly id: number;
  name: string;
  age?: number;
}

ここでは、idプロパティは読み取り専用で、一度割り当てられると変更できません。

nameは必須のプロパティですが、ageはオプショナルとして定義されており、このプロパティを持たないオブジェクトもこのインターフェースに適合します。

応用: 関数パラメータとしてのインターフェースの使い方

インターフェースは関数の引数を定義するのに有用です。

これにより、関数が受け入れるオブジェクトの構造を定められます。

以下は、createUser関数が特定の形のオブジェクトを要求する例です。

interface User {
  username: string;
  password: string;
}

function createUser(user: User) {
  // ユーザーの作成ロジック
}

この関数はUserインターフェースに従っている必要がある任意のオブジェクトを受け取るもの。

もしUser型でないものが渡された場合、TypeScriptコンパイラはエラーを提示してくれます。

より詳細に: オブジェクト型でインターフェースを使う方法

オブジェクト型のプロパティを持つインターフェースの定義は、ネストされた構造を持つデータを扱う際に役立つもの。

以下に、Contactインターフェースをネストして使用する例を挙げます。

interface Address {
  street: string;
  city: string;
  postalCode: string;
}

interface Contact {
  name: string;
  address: Address; // Addressインターフェースを使用
}

function printContact(contact: Contact) {
  console.log(`Name: ${contact.name}`);
  console.log(`Address: ${contact.address.street}, ${contact.address.city}, ${contact.address.postalCode}`);
}

Contactインターフェースには名前と住所の両方が含まれており、Addressインターフェースの構造に準拠する必要があります。

関連する複数のプロパティを一つのオブジェクトとしてグループ化し、コードの整理と管理を容易にできるのです。

配列型にインターフェースを活用する方法

配列型プロパティを扱う際も、インターフェースは非常に有効です。

例えば、あるオブジェクトが複数の連絡先情報を保持している場合、以下のように記述できます。

interface Contact {
  name: string;
  phone: string;
}

interface ContactsList {
  contacts: Contact[];
}

function printContactsList(contactsList: ContactsList) {
  contactsList.contacts.forEach(contact => {
    console.log(`Name: ${contact.name}, Phone: ${contact.phone}`);
  });
}

• ContactsListインターフェース: Contactオブジェクトの配列をcontactsという名前で保持
• printContactsList関数: この配列をループ処理することで、全ての連絡先情報を表示

インターフェースを使用することで、どのような型のデータが配列に含まれるのかを明示的できます。

インターフェースの進んだ利用法

インターフェースをより深く理解するため、構造的部分型から条件付き型まで、さまざまな進んだ利用法について説明します。

• 構造的部分型とインターフェースとの関連
• インターフェース継承のノウハウ
• 複数インターフェースを利用した実装戦略
• インターフェースの条件付き型

構造的部分型とインターフェースとの関連

TypeScriptは、「構造的部分型」を採用しています。

変数の型を直接指定しなくても、その構造が型の要件を満たしていれば、その変数はその型として扱われるというものです。

インターフェースと組み合わせることで、より柔軟で再利用可能なコードを実現できます。

例えば、以下のコードを見てみましょう。

interface Shape {
  color: string;
}

interface Square extends Shape {
  sideLength: number;
}

let square = {} as Square;
square.color = "blue";
square.sideLength = 10;

ここでは、SquareインターフェースがShapeインターフェースを継承しています。

これにより、squareオブジェクトはcolorプロパティとsideLengthプロパティの両方を持つ必要があり、Shape型としてもSquare型としても扱えます。

インターフェース継承のノウハウ

インターフェースの継承は、既存のインターフェースを拡張して新しいインターフェースを作る際に重要です。

継承を利用することで、インターフェース間でコードを再利用し、より明確な型関係を表現できます。

以下は、継承の基本的な例です。

interface Animal {
  name: string;
}

interface Bear extends Animal {
  honey: boolean;
}

let bear: Bear = { name: "Winnie", honey: true };

BearインターフェースはAnimalインターフェースを継承し、新しいhoneyプロパティを追加しています。

Bear型の変数にはAnimal型が持つプロパティと、Bear型自体が追加したプロパティが必要です。

複数インターフェースを利用した実装戦略

ひとつのクラスまたはオブジェクトが複数のインターフェースを実装することは、TypeScriptの強力な機能のひとつ。

これにより、さまざまな型の要件をひとつの複合型として組み合わせて使用することが可能です。

例えば、以下のコードではBirdインターフェースとRunnerインターフェースを結合しています。

interface Bird {
  fly: boolean;
  layEggs: boolean;
}

interface Runner {
  run: boolean;
}

interface BirdRunner extends Bird, Runner {}

let roadrunner: BirdRunner = { fly: false, layEggs: true, run: true };

この例では、BirdRunnerインターフェースはBirdとRunnerの両方からプロパティを継承しており、roadrunnerオブジェクトはBirdRunnerの型要件をすべて満たしている必要があります。

インターフェースの条件付き型

条件付き型は、型の定義をある条件に基づいて変化させるための強力なメカニズムです。

TypeScript 2.8以降で利用可能になったこの機能は、特に高度な型操作やライブラリの実装において役立ちます。

以下に条件付き型を使ったインターフェースの例を示します。

interface Small {
  size: 'small';
}

interface Large {
  size: 'large';
}

interface Fish {
  swim: boolean;
}

type ZooAnimal = Fish & (Small | Large);

// コンディショナルチェックがSmall型かLarge型かにより、異なるステータスのオブジェクトを作る
function createZooAnimal<T extends Small | Large>(type: T): ZooAnimal & T {
  let animal = { swim: true, size: type.size } as ZooAnimal & T;
  return animal;
}

この例では、createZooAnimal関数にはSmall型またはLarge型のsizeプロパティを持つオブジェクトを渡せます。

戻り値はそのsizeを含めたZooAnimal型です。

これにより、動的に条件に応じた型のオブジェクトを生成できます。

インターフェース活用の利点

インターフェースを利用することで得られる様々な利点を具体的に解説し、実務でのインターフェースの活用事例も挙げていきます。

• 型安全性とコードの可読性向上
• メンテナンスと拡張性の利点
• インターフェースを利用する際のベストプラクティス
• 実務でのインターフェースの活用事例

型安全性とコードの可読性向上

TypeScriptのインターフェースを利用する最大の利点は、型安全性の向上です。

正しく型が付けられたコードは、バグの原因となる型の誤りを事前に防ぎます。

型の宣言を通じてコードの意図が明確化され、可読性も向上。

これにより、新しい開発者がプロジェクトに参加したときや、長期に渡るプロジェクト管理する際に、コードベースを理解しやすくなります。

メンテナンスと拡張性の利点

インターフェースは、コードのメンテナンスと拡張性を向上させる効果もあります。

共通のインターフェースに従っているコンポーネントは、互換性を保ちながら新機能の追加や既存機能の改善をおこないやすくのがメリット。

またインターフェースが定義されたプロトコルに従っている限り、異なるクラスやモジュール間でのデータ交換が容易になります。

大規模なリファクタリングや将来の変更に強い設計を実現可能です。

インターフェースを利用する際のベストプラクティス

インターフェースを最大限に活用するためには、いくつかのベストプラクティスが存在します。

例えば、可能な限り具体的な型を使用し、any型の使用を避けることは重要です。

また、再利用可能でモジュラーなインターフェースを設計し、インターフェースを小さな単位に分割して関心の分離を図ると良いでしょう。

さらに、インターフェースを利用してドキュメント化し、開発者間でのコミュニケーションを強化することも効果的です。

実務でのインターフェースの活用事例

実務例としては、以下のような場面でインターフェースが使用されます。

• APIレスポンスの型定義
• フロントエンドとバックエンド間のデータ契約の設定
• 大規模なアプリケーションでのサービスやコンポーネントの設計

下記のようなAPI応答型インターフェースは、APIから受け取ったデータの構造を具体化し、使用箇所での型エラーを防ぎます。

interface ApiResponse {
  status: number;
  data?: any;
  message?: string;
}

// API呼び出し関数
async function fetchData(url: string): Promise<ApiResponse> {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return {status: response.status, data: data};
  } catch (error) {
    return {status: 500, message: error.message};
  }
}

この例のように、インターフェースは実務においても、コード設計のクリアな設計図として機能し得ます。

まとめ

当記事では、TypeScriptのインターフェースについて学習してきました。

• インターフェースによるTypeScriptの効果的な利用方法
• コーディングとアプリケーション設計におけるインターフェースの役割

型安全性とコードの可読性を高め、効率的な開発を実現するために、インターフェースに関する知識は不可欠です。

今後もTypeScriptのインターフェースを深く理解し、プログラミングスキルの向上に役立てていきましょう。