サイトアイコン ITC Media

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

ITC運営

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

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

「TypeScriptのインターフェースとは具体的に何ができるのだろうか？」

「インターフェースの定義方法を理解したい」

「TypeScriptのインターフェースの使用例を見てみたい」

当記事でお伝えすること

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

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

運営者プロフィール

現在はIT企業のプロダクトマネージャーとして、個人向け/社内向けシステムなど、複数のシステム開発・運営に携わっています。

Webサイト構築やECサイトの開発経験に加えて、PythonなどのプログラミングやSalesforceなどのクラウドアプリケーションに関する幅広い知識・経験を活かして「プログラミング初心者がスムーズに学べるサイト」を目指しています。

Githubでは、趣味で作成したアプリなどを公開しています。

https://github.com/Yulikepython/

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
created by Rinker

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}`);
  });
}

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

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

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

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

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から受け取ったデータの構造を具体化し、使用箇所での型エラーを防ぎます。

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のインターフェースを深く理解し、プログラミングスキルの向上に役立てていきましょう。

モバイルバージョンを終了