TypeScriptのインターフェース使い方10選

はじめに
●TypeScriptのインターフェースとは
- ○インターフェースの基本
●インターフェースの使い方10選
●カスタマイズ方法
- ○既存のインターフェースのカスタマイズ
- ○プロパティのカスタマイズ
まとめ

はじめに

TypeScriptは、JavaScriptに静的型チェックの機能を追加した言語です。

特に、TypeScriptのインターフェースは、型の形状を定義する強力なツールとして多くの開発者から支持を受けています。

初めてTypeScriptを学ぶ方にとって、インターフェースの使い方やその魅力を十分に感じるまでには、一定の学習が必要かもしれません。

しかし、この記事を通じて、TypeScriptのインターフェースの基本的な使い方から応用例まで、初心者でも理解できるように詳細に解説していきます。

10のサンプルコードを交えて、インターフェースの使い方を学び、その魅力を実感してください。

TypeScriptのインターフェースを効果的に使用するためのテクニックや注意点、カスタマイズの方法も最後に触れていますので、是非最後までお読みいただき、TypeScriptのインターフェースの使い方をマスターしてください。

●TypeScriptのインターフェースとは

TypeScriptは、JavaScriptのスーパーセットとして設計された静的型付け言語です。

そのため、JavaScriptに存在する多くの機能をそのまま利用できますが、それに加えて、TypeScript独自の機能も持っています。その中でも特に重要なのが「インターフェース」です。

インターフェースは、オブジェクトや関数が持つべき型を定義するための仕組みであり、TypeScriptのコードをより安全に、そしてわかりやすく書くための鍵となる機能です。

○インターフェースの基本

TypeScriptのインターフェースを理解するためには、まずその基本的な形を知ることが重要です。

インターフェースは、オブジェクトが持つべきプロパティやメソッドの形状を定義するものです。

このコードではPersonという名前のインターフェースを作成し、nameとageというプロパティを持つことを表しています。

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

例えば、上記のインターフェースを使用して、次のようなオブジェクトを作成することができます。

let tanaka: Person = {
  name: '田中',
  age: 30
};

しかし、Personインターフェースに従わないオブジェクトを作成しようとすると、TypeScriptのコンパイラはエラーを返します。

例えば、ageプロパティが文字列型であるなどの不整合が存在する場合などです。

こうした機能は、大規模なプロジェクトやチームでの開発において、バグの予防やコードの品質を高めるために非常に有効です。

また、インターフェースを活用することで、ソフトウェアの設計時に、どのようなデータ構造や関数が必要かを明確にし、その後の実装をスムーズに進めることができます。

●インターフェースの使い方10選

TypeScriptはJavaScriptに静的型付けを追加することで、大規模なプロジェクトでの開発を容易にし、バグを早期に発見することを可能にしています。

そして、その静的型付けを効果的に行うための要素として、インターフェースが非常に重要な役割を果たしています。

今回は、初心者の方でも簡単に取り入れられるよう、インターフェースの10の使い方を具体的なサンプルコードと共に解説します。

○サンプルコード1：単純なインターフェースの定義

このコードでは、基本的なインターフェースの定義方法を表しています。

この例では、ユーザー情報を表すオブジェクトの型をインターフェースで定義しています。

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

const user: User = {
    name: 'Taro',
    age: 25
};

上記のインターフェースUserでは、nameプロパティは文字列、ageプロパティは数値であることを示しています。

したがって、userオブジェクトを定義する際に、これらの型と異なる値を代入しようとすると、コンパイルエラーが発生します。

○サンプルコード2：関数型インターフェース

このコードでは、関数の型を定義する方法を表しています。

この例では、2つの数値を受け取り、数値を返す関数の型をインターフェースで定義しています。

interface Calculate {
    (a: number, b: number): number;
}

const add: Calculate = (x, y) => {
    return x + y;
};

上記の例では、Calculateインターフェースを用いて関数addの型を定義しています。

この関数は、2つの数値を受け取り、それらの合計値を返します。

○サンプルコード3：オプショナルなプロパティ

このコードでは、インターフェース内でのオプショナルなプロパティの使い方を表しています。

この例では、ユーザー情報の中で、電話番号が必須でない場合の型を定義しています。

interface UserWithOptionalPhone {
    name: string;
    age: number;
    phone?: string;
}

const user2: UserWithOptionalPhone = {
    name: 'Hanako',
    age: 23
};

上記の例では、phoneプロパティの後に「?」を追加することで、そのプロパティが必須でないことを示しています。

したがって、user2オブジェクトを定義する際に、phoneプロパティを省略してもエラーになりません。

○サンプルコード4：readonlyプロパティの使用

TypeScriptは、JavaScriptのスーパーセットであり、静的型付けやインターフェースなどの強力な機能を提供しています。

今回は、TypeScriptのインターフェースの中でも特に「readonlyプロパティ」の使い方に焦点を当てて詳しく解説していきます。

readonlyプロパティを使用することで、オブジェクトのプロパティが初期化時以外での再代入を禁止することができます。

これは、不意の再代入や変更からデータの安全性を守るための強力な機能となります。

このコードではTypeScriptのインターフェース内でreadonlyプロパティを使って、後から変更できないデータを定義する方法を表しています。

この例では、人物の情報を保持するインターフェースを定義し、名前プロパティをreadonlyとして設定しています。

// 人物の情報を持つインターフェースを定義
interface Person {
    readonly name: string;
    age: number;
}

// 人物の情報を持つ変数を定義
let person: Person = {
    name: "山田太郎",
    age: 30
};

// 下記のコードはエラーとなる
// person.name = "佐藤次郎";

上記のコードでは、Personインターフェースにreadonly name: string;という形でreadonlyプロパティを持つことが表されています。

そして、person変数を定義した後、nameプロパティの再代入を試みると、コンパイルエラーが発生することが確認できます。

このように、readonlyプロパティを使用することで、一度設定した値を保護し、再代入を防ぐことができます。

特に大きなプロジェクトやチーム開発において、データの一貫性や安全性を維持するための役立つ機能と言えます。

しかし、注意が必要なのは、readonlyプロパティはそのプロパティ自体の再代入を禁止するもので、プロパティがオブジェクトや配列の場合、その中の要素までは保護されない点です。

具体的な例を見てみましょう。

interface Config {
    readonly settings: {
        theme: string;
    }
}

let config: Config = {
    settings: {
        theme: "dark"
    }
};

// settings自体の再代入はエラーとなる
// config.settings = { theme: "light" };

// しかし、settings内のプロパティは変更可能
config.settings.theme = "light";

上記のコードでは、settingsプロパティがreadonlyとして設定されていますが、その中のthemeプロパティは変更が可能であることが確認できます。

このような挙動を避けるためには、ネストしたオブジェクトの各プロパティもreadonlyにする必要があります。

○サンプルコード5：インターフェースの拡張

TypeScriptのインターフェースは非常に強力で、一つのインターフェースを元にして新しいインターフェースを作成することができます。

この技術は「インターフェースの拡張」として知られています。インターフェースの拡張を活用することで、より柔軟に、かつ再利用性の高いコードを作成することが可能になります。

このコードでは、既存のインターフェースを使って新しいインターフェースを作成する方法を表しています。

この例では、基本的な人の情報を示すPersonインターフェースを拡張して、職業情報も含めたEmployeeインターフェースを作成しています。

// 人の情報を表すインターフェース
interface Person {
    name: string;
    age: number;
    // ここに追加のプロパティを書くことができる
}

// Personインターフェースを拡張して、職業情報を追加する
interface Employee extends Person {
    position: string;
    // 他の職業関連の情報も追加できる
}

// Employeeインターフェースを使った例
const taro: Employee = {
    name: "太郎",
    age: 28,
    position: "エンジニア"
};

console.log(`名前は${taro.name}、年齢は${taro.age}歳、職業は${taro.position}です。`);

上記のコードを実行すると、次のようなメッセージが表示されます。

名前は太郎、年齢は28歳、職業はエンジニアです。

ここでのポイントは、EmployeeインターフェースがPersonインターフェースの全てのプロパティを継承している点です。

これにより、Employee型の変数にはnameやageといったPersonで定義されているプロパティを持つことが保証されます。

注意点として、既存のインターフェースを拡張する場合、元のインターフェースの定義を変更してはいけません。

新しいプロパティやメソッドを追加することは問題ありませんが、元のプロパティやメソッドを削除したり、型を変更したりすると、予期しないエラーやバグが発生するリスクがあります。

また、応用例として、複数のインターフェースを組み合わせて一つの新しいインターフェースを作成することもできます。

これは「インターフェースの合成」と呼ばれるテクニックで、次の項目で詳しく解説します。

○サンプルコード6：インターフェースの合成

TypeScriptでは、複数のインターフェースを一つにまとめることができる機能があります。

この機能は「インターフェースの合成」と呼ばれ、主に異なるインターフェースに共通の機能やプロパティを持たせる際に使用されます。

具体的には、既存のインターフェースを再利用して、新しいインターフェースを定義する際に有効です。

このコードでは、インターフェースの合成を利用して、2つのインターフェースを結合して新しいインターフェースを作成する方法を表しています。

この例では、PersonインターフェースとJobインターフェースを組み合わせて、Employeeインターフェースを定義しています。

// Personインターフェースの定義
interface Person {
    name: string;
    age: number;
}

// Jobインターフェースの定義
interface Job {
    jobTitle: string;
    department: string;
}

// PersonとJobのインターフェースを合成してEmployeeインターフェースを定義
interface Employee extends Person, Job {}

// Employeeインターフェースを使用してオブジェクトを定義
const employee: Employee = {
    name: "山田太郎",
    age: 30,
    jobTitle: "エンジニア",
    department: "開発部"
};

// オブジェクトの中身を表示
console.log(employee);

上記のコードを実行すると、山田太郎という名前の30歳のエンジニアとして開発部に所属している従業員の情報を持つオブジェクトが表示されます。

具体的には、次のような内容がコンソール上に表示されるでしょう。

山田太郎さんは、30歳で開発部のエンジニアとして働いています。

このように、複数のインターフェースを合成することで、より詳細な型定義を効率的に行うことができます。

特に、大規模なプロジェクトや多くの開発者が関与するプロジェクトでは、このようなインターフェースの再利用は非常に役立ちます。

応用例として、既存のインターフェースを少し変更して新しいインターフェースを作成する場合もあります。

たとえば、Employeeインターフェースに給与(salary)の情報も加えたい場合は、次のように新しいインターフェースを定義できます。

// Salaryインターフェースの定義
interface Salary {
    salary: number;
}

// EmployeeインターフェースにSalaryインターフェースを追加して新しいインターフェースを定義
interface FullTimeEmployee extends Employee, Salary {}

const fullTimeEmployee: FullTimeEmployee = {
    name: "山田太郎",
    age: 30,
    jobTitle: "エンジニア",
    department: "開発部",
    salary: 500000
};

console.log(fullTimeEmployee);

このコードを実行すると、山田太郎さんの基本情報に加えて、給与情報も含まれたオブジェクトが表示されるでしょう。

○サンプルコード7：インデックスシグネチャ

TypeScriptのインターフェースは、オブジェクトの構造を定義するだけでなく、インデックスシグネチャという特殊な機能も持っています。

この機能を利用すると、特定のキーと値の型を定義し、動的なプロパティの名前とその型を指定することができます。

このコードでは、インデックスシグネチャを使用して、文字列のキーと文字列の値を持つオブジェクトの型を定義する方法を表しています。

この例では、キーを文字列として、値を文字列として保持するオブジェクトを作成しています。

interface StringDictionary {
    // 文字列のキーと文字列の値を持つオブジェクトの型定義
    [key: string]: string;
}

const user: StringDictionary = {
    name: "田中太郎",
    address: "東京都"
    // ... 他にも文字列のキーと値を追加可能
};

この例では、StringDictionaryというインターフェースを定義しています。

このインターフェース内のインデックスシグネチャ[key: string]: string;は、オブジェクトが文字列のキーを持ち、そのキーに対応する値も文字列であることを示しています。

userオブジェクトを定義する際には、nameやaddressといった任意の文字列のキーを追加することができ、それぞれのキーに対する値も文字列である必要があります。

このインデックスシグネチャの機能は、オブジェクトのプロパティ名や数が固定されていない場合や、動的なプロパティ名を持つオブジェクトの型を定義したい場合に非常に役立ちます。

さらに応用すると、インデックスシグネチャを用いて、数値のキーと特定の型の値を持つ配列のようなオブジェクトも定義することができます。

interface NumberArray {
    // 数値のキーと文字列の値を持つオブジェクトの型定義
    [index: number]: string;
}

const colors: NumberArray = {
    0: "赤",
    1: "青"
    // ... 他にも数値のキーと文字列の値を追加可能
};

このようにして、インデックスシグネチャを活用することで、柔軟に型を定義し、コードの品質を保つことができます。

特に、外部APIなどから取得したデータの型を安全に扱いたい場合や、プロパティの動的な追加・削除を行いたい場合には、この機能が非常に有用です。

○サンプルコード8：クラスとインターフェース

TypeScriptでは、インターフェースはクラスと連携して動作させることができます。

クラスを使って具体的なオブジェクトの設計をする際、インターフェースを活用することで、必要なプロパティやメソッドが正しく実装されているかを保証できます。

ここでは、インターフェースとクラスを組み合わせて使用する方法を詳しく解説します。

このコードでは、PersonInterfaceというインターフェースを用いて、その後に実際のクラスPersonを実装しています。

この例では、インターフェースを使って必要なプロパティとメソッドの型を定義し、クラスでそれを具体的に実装しています。

// インターフェースの定義
interface PersonInterface {
    name: string;
    age: number;
    greeting(): string; // メソッドの型定義も可能
}

// インターフェースを実装したクラス
class Person implements PersonInterface {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    // インターフェースで定義したメソッドを実装
    greeting(): string {
        return `こんにちは、私の名前は${this.name}です。${this.age}歳です。`;
    }
}

// クラスのインスタンスを作成
const person1 = new Person('太郎', 25);

// greetingメソッドを呼び出す
console.log(person1.greeting());

上記のコードを実行すると、こんにちは、私の名前は太郎です。25歳です。

というメッセージが出力されることになります。

クラスとインターフェースの組み合わせのメリットとして、一貫性のあるコード設計が挙げられます。

インターフェースにより、クラスに期待される振る舞いやプロパティの型が強制されるため、意図しない実装を防ぐことができます。

また、インターフェースを利用することで、複数のクラスで共通のプロパティやメソッドを持つことが要求される場合、その共通部分をインターフェースとして切り出し、各クラスでそのインターフェースを実装することで、コードの再利用性と可読性が向上します。

例えば、動物を表すインターフェースと、そのインターフェースを実装する犬や猫のクラスを考えてみましょう。

interface AnimalInterface {
    name: string;
    sound(): string;
}

class Dog implements AnimalInterface {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    sound(): string {
        return 'ワンワン';
    }
}

class Cat implements AnimalInterface {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    sound(): string {
        return 'ニャー';
    }
}

const dog = new Dog('ポチ');
const cat = new Cat('ミケ');

console.log(`${dog.name}の鳴き声は、${dog.sound()}です。`);
console.log(`${cat.name}の鳴き声は、${cat.sound()}です。`);

このコードを実行すると、ポチの鳴き声は、ワンワンです。およびミケの鳴き声は、ニャーです。というメッセージが出力されます。

○サンプルコード9：関数のオーバーロード

関数のオーバーロードとは、同じ関数名を持ちながら、異なるパラメータの型や返り値の型を持つ関数を複数定義する技術を指します。

TypeScriptでは、この機能を利用して、複数の関数定義を一つの関数名にまとめることができます。

これにより、関数の利用時に柔軟なパラメータの取り扱いや返り値の取り扱いが可能となります。

下記のサンプルコードでは、数値を二つ受け取りその合計を返す関数と、文字列を二つ受け取りその結合結果を返す関数を同じ関数名でオーバーロードしています。

// オーバーロードの宣言
function combine(a: number, b: number): number;
function combine(a: string, b: string): string;

// オーバーロードの実装
function combine(a: any, b: any): any {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    }
    if (typeof a === 'string' && typeof b === 'string') {
        return a.concat(b);
    }
    throw new Error('Invalid types passed to combine function.');
}

// 使用例
const combinedNumbers = combine(5, 3);
const combinedStrings = combine("Type", "Script");

このコードでは、combine関数を使って数値を2つ渡すことで、その合計値を取得できます。また、文字列を2つ渡すことで、その結合結果を取得することも可能です。

この例では、5と3を渡して8を取得し、”Type”と”Script”を渡して”TypeScript”という文字列を取得しています。

ただし、オーバーロードを使う場合は、実際の関数実装の前にオーバーロードの宣言を行う必要があります。

この宣言は実際の処理を行わないので、その後に具体的な関数の実装を記述する必要があります。

応用例として、オーバーロードを用いることで、関数に渡すパラメータの型や数に応じて、異なる処理を実装することが可能となります。

例えば、関数に配列を渡すとその要素の合計を返す機能や、オブジェクトを渡すと特定のプロパティの値を返す機能など、多岐にわたる柔軟な関数の実装が可能となります。

カスタマイズ例として、オーバーロードした関数の中で、特定の条件を満たす場合だけ特別な処理を追加することも考えられます。

例えば、文字列を結合する際に、特定のキーワードが含まれている場合には結果に特定のサフィックスを追加するといった機能も追加できます。

○サンプルコード10：ジェネリクスとインターフェース

TypeScriptには、汎用的なコードを書くための「ジェネリクス」という機能があります。

ジェネリクスを使用すると、関数やクラスなどに対して、動的な型を設定できるようになります。

今回は、このジェネリクスをインターフェースと組み合わせて使う方法を紹介します。

このコードでは、ジェネリクスを使ってインターフェースを定義する方法を紹介しています。

この例では、キーと値のペアを持つオブジェクトを表すインターフェースを、ジェネリクスを活用して作成しています。

interface KeyValuePair<T, U> {
    key: T;
    value: U;
}

let pair1: KeyValuePair<string, number> = { key: "age", value: 25 };
let pair2: KeyValuePair<number, string[]> = { key: 101, value: ["apple", "banana"] };

このコードの中では、KeyValuePairというインターフェースをジェネリクスを使って定義しています。

pair1は、keyが文字列型で、valueが数値型のオブジェクトとして定義されています。

一方、pair2はkeyが数値型、valueが文字列の配列として定義されています。

pair1のオブジェクトは、”age”というキーと25という値を持ちます。

pair2のオブジェクトは、101というキーと[“apple”, “banana”]という値を持っています。

このようにジェネリクスを使用すると、柔軟な型の制約を持つインターフェースを簡単に作成することができます。

また、この方法は、オブジェクトの構造を柔軟に保持しつつ、型の安全性も確保することができるため、大規模なアプリケーションの開発などで非常に便利です。

TypeScriptのインターフェースとジェネリクスの組み合わせは、コードの再利用性を高めるだけでなく、より柔軟なコード設計を可能にします。

初心者の方でも、ジェネリクスの基本的な使い方を理解すれば、この強力な組み合わせを活用して効率的なコードを書くことができるでしょう。

また、ジェネリクスは関数やクラスでも使用することができるので、その応用範囲は非常に広いです。

今回紹介した例は、ジェネリクスの基本的な使い方を表すものですが、さらに深く学ぶことで、TypeScriptの真価を引き出すことができます。

●注意点と対処法

TypeScriptのインターフェースを用いる際には、多くの利点がありますが、同時にいくつかの注意点や落とし穴も存在します。

初心者が特に気をつけるべきポイントと、それらの問題を回避するための具体的な対処法を解説します。

○インターフェースの名前の衝突

このコードでは、同じ名前のインターフェースを複数定義してしまう問題を表しています。

この例ではUserという名前のインターフェースを2つ定義してしまっています。

// 既存のインターフェース
interface User {
  id: number;
  name: string;
}

// 何らかの理由で同名のインターフェースを再定義
interface User {
  email: string;
}

このような場合、後に定義されたインターフェースが先に定義されたものを上書きしてしまうリスクがあります。

対処法：

モジュールや名前空間を利用して、インターフェースのスコープを限定する方法が考えられます。

また、より具体的な名前を付けることで名前の衝突を防ぐことができます。

○インターフェースの拡張時の注意点

このコードでは、インターフェースを拡張する際に起こり得る問題を表しています。

この例ではPersonインターフェースを拡張してEmployeeインターフェースを作成していますが、型の不一致が発生しています。

interface Person {
  name: string;
}

interface Employee extends Person {
  name: string;
  employeeId: number;
}

上記の例では、Employeeインターフェースではnameプロパティが再定義されています。

これは不要であり、また誤解を招きやすいので避けるべきです。

対処法：

既存のインターフェースを拡張する際は、重複するプロパティを再定義しないように注意しましょう。

不要なプロパティの再定義はコードの可読性を低下させるだけでなく、バグの原因ともなり得ます。

○オプショナルなプロパティの過度な使用

このコードでは、オプショナルなプロパティを過度に使用することのデメリットを表しています。

この例では、ほとんどのプロパティがオプショナルとして定義されています。

interface Product {
  id?: number;
  name?: string;
  description?: string;
  price?: number;
}

このようにオプショナルなプロパティが多いと、どのプロパティが実際に必須であるのかが不明瞭になり、コードの可読性や保守性が低下します。

対処法：

必須のプロパティとオプショナルなプロパティを明確に分け、必要最小限のオプショナルなプロパティのみを使用するように心がけましょう。

●カスタマイズ方法

TypeScriptのインターフェースは、一見シンプルな機能に見えますが、深く探るとその柔軟性と拡張性を実感することができます。

初心者でも、基本的な使い方を理解すれば、様々なカスタマイズを行うことができます。

ここでは、TypeScriptのインターフェースをカスタマイズする際のいくつかの方法とサンプルコードを紹介します。

○既存のインターフェースのカスタマイズ

インターフェースを既に定義している場合でも、それを編集することなく新しいインターフェースを作成することができます。

この技術を使用すると、元のインターフェースを変更せずに新しい機能を追加することができます。

このコードでは、Personインターフェースを使ってEmployeeインターフェースを拡張するコードを表しています。

この例では、PersonインターフェースにjobTitleを追加してEmployeeインターフェースを作成しています。

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

interface Employee extends Person {
  jobTitle: string;
}

const employee1: Employee = {
  name: "田中",
  age: 30,
  jobTitle: "エンジニア"
};

上記の例では、EmployeeインターフェースがPersonインターフェースの全てのプロパティを継承しつつ、新たにjobTitleプロパティを追加しています。

○プロパティのカスタマイズ

あるプロパティを特定の条件下でのみ許可したい場合、条件付き型を使用すると便利です。

このコードでは、条件付き型を使用して、isStudentがtrueの場合のみ、gradeプロパティを許可するコードを紹介しています。

この例では、Userインターフェースを定義して、isStudentがtrueの場合にgradeプロパティが存在することを確認しています。

interface Student {
  isStudent: true;
  grade: number;
}

interface Worker {
  isStudent: false;
  occupation: string;
}

type User = Student | Worker;

const user1: User = {
  isStudent: true,
  grade: 3
};

const user2: User = {
  isStudent: false,
  occupation: "エンジニア"
};

user1の例では、isStudentがtrueのため、gradeプロパティを持つことができます。

一方、user2の例では、isStudentがfalseなので、occupationプロパティを持っています。