TypeScript ジェネリックインターフェース

Summary: このチュートリアルでは、型安全性を維持しながら、さまざまな型で動作できるインターフェースを作成するための TypeScript ジェネリックインターフェースの開発方法を学びます。

TypeScript ジェネリックインターフェースの紹介

クラスと同様に、インターフェースもジェネリックにすることができます。ジェネリックインターフェースを使用すると、型安全性を維持しながら、さまざまな型で動作するインターフェースを作成できます。

ジェネリックインターフェースには、インターフェース名の後に山カッコ <> で囲まれたジェネリック型パラメータのリストがあります。

interface interfaceName<T> {
    // ...
}Code language: TypeScript (typescript)

これにより、型パラメータ T がインターフェースのすべてのメンバーに表示されます。

型パラメータリストには、1 つまたは複数の型を含めることができます。たとえば

interface interfaceName<U,V> {
    // ...
}
Code language: TypeScript (typescript)

TypeScript ジェネリックインターフェースの例

次に、ジェネリックインターフェースを宣言するいくつかの例を示します。

1) オブジェクトプロパティを記述するジェネリックインターフェース

次に、対応する型 K と V を持つキーと値という 2 つのメンバーで構成されるジェネリックインターフェースを宣言する方法を示します。

interface Pair<K, V> {
    key: K;
    value: V;
}
Code language: TypeScript (typescript)

これで、Pair インターフェースを使用して、任意の型を持つキーと値のペアを定義できます。たとえば

let month: Pair<string, number> = {
    key: 'Jan',
    value: 1
};

console.log(month);Code language: TypeScript (typescript)

この例では、キーが文字列で値が数値である月キー/値ペアを宣言します。

2) メソッドを記述するジェネリックインターフェース

次に、add() メソッドとremove() メソッドの 2 つのメソッドを持つジェネリックインターフェースを宣言します。

interface Collection<T> {
    add(o: T): void;
    remove(o: T): void;
}
Code language: TypeScript (typescript)

この List<T> ジェネリッククラスは、Collection<T> ジェネリックインターフェースを実装します。

class List<T> implements Collection<T>{
    private items: T[] = [];

    add(o: T): void {
        this.items.push(o);
    }
    remove(o: T): void {
        let index = this.items.indexOf(o);
        if (index > -1) {
            this.items.splice(index, 1);
        }
    }
}
Code language: TypeScript (typescript)

List<T> クラスから、さまざまな型の値（数値や文字列など）のリストを作成できます。

たとえば、List<T> ジェネリッククラスを使用して数値のリストを作成する方法を次に示します。

let list = new List<number>();

for (let i = 0; i < 10; i++) {
    list.add(i);
}
Code language: TypeScript (typescript)

3) インデックスタイプを記述するジェネリックインターフェース

次に、インデックスタイプを記述するインターフェースを宣言します。

interface Options<T> {
    [name: string]: T
}

let inputOptions: Options<boolean> = {
    'disabled': false,
    'visible': true
};
Code language: TypeScript (typescript)

このチュートリアルでは、TypeScript ジェネリックインターフェースについて学びました。