TypeScript 配列拡張 解説

TypeScript では、配列を拡張してカスタムのメソッドやプロパティを追加することができます。これにより、配列の機能を拡張し、より柔軟なデータ構造を実現できます。

基本的な配列の拡張

interface MyArray<T> extends Array<T> {
  // カスタムメソッド
  myCustomMethod(): void;
}

const myArray: MyArray<number> = [1, 2, 3];
myArray.myCustomMethod(); // カスタムメソッドを呼び出す

この例では、MyArray インターフェースを定義し、Array<T> を継承しています。そして、myCustomMethod というカスタムメソッドを追加しています。このカスタムメソッドは、myArray 変数に割り当てられた配列で使用できます。

注意

• 配列の拡張は、特定のユースケースで便利な手法ですが、過度に使用するとコードの複雑性が増す可能性があります。
• カスタムメソッドを追加するときは、TypeScript の型システムを考慮して、適切な引数と戻り値の型を指定する必要があります。
• TypeScript の配列は、JavaScript の配列と同様に動作します。そのため、既存の配列メソッド（push, pop, map, filter など）はそのまま使用できます。

具体的な使用例

• カスタムのソートメソッド
  

  interface SortedArray<T> extends Array<T> {
    sortByLength(): void;
  }
  
  const words: SortedArray<string> = ["apple", "banana", "cherry"];
  words.sortByLength();
  

• カスタムのフィルタリングメソッド
  

  interface FilteredArray<T> extends Array<T> {
    filterEven(): T[];
  }
  
  const numbers: FilteredArray<number> = [1, 2, 3, 4, 5];
  const evenNumbers = numbers.filterEven();
  

// Example 1: Adding a Custom Method to an Array

interface MyArray<T> extends Array<T> {
  // Custom method to find the average of numbers in the array
  average(): number;
}

const numbers: MyArray<number> = [1, 2, 3, 4, 5];
const averageValue = numbers.average(); // Calculate the average
console.log(averageValue); // Output: 3

Explanation

1. Interface Definition
   

   • We define an interface MyArray that extends the built-in Array interface.
   • The average() method is added as a custom method to this interface.

2. Array Creation
   

3. Method Usage
   

   • We call the average() method on the numbers array to calculate the average.
   • The result is stored in the averageValue variable.

Implementation of the average() Method

interface MyArray<T> extends Array<T> {
  average(): number {
    const sum = this.reduce((acc, num) => acc + num, 0);
    return sum / this.length;
  }
}

1. Method Body
   
   • The average() method calculates the average of the numbers in the array.
   • It uses the reduce() method to sum up all the numbers in the array.
   • The sum is then divided by the length of the array to get the average.

Example 2: Adding a Custom Filtering Method

interface FilteredArray<T> extends Array<T> {
  // Custom method to filter even numbers
  filterEven(): T[];
}

const numbers: FilteredArray<number> = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filterEven();
console.log(evenNumbers); // Output: [2, 4]

1. • The FilteredArray interface extends the Array interface.
   • The filterEven() method is added as a custom method to filter even numbers.

interface FilteredArray<T> extends Array<T> {
  filterEven(): T[] {
    return this.filter(num => num % 2 === 0);
  }
}

1. Method Body
   
   • The lambda expression num => num % 2 === 0 checks if a number is even.
   • The filtered even numbers are returned as a new array.

ジェネリック型を用いたクラス

class MyArray<T> {
    private items: T[] = [];

    constructor(...items: T[]) {
        this.items = items;
    }

    // カスタムメソッド
    average(): number {
        if (this.items.length === 0) {
            return 0;
        }
        const sum = this.items.reduce((acc, num) => acc + num, 0);
        return sum / this.items.length;
    }
}

この方法では、MyArray クラスを定義し、ジェネリック型 T を使用して、任意の型の要素を格納できる配列を表現します。カスタムメソッド average() をクラス内に定義することで、配列の機能を拡張できます。

Mixin パターン

Mixin パターンは、複数のクラスから機能を組み合わせる手法です。このパターンを使用して、配列にカスタム機能を追加できます。

function Averageable<T extends { length: number }>(Base: new (...args: any[]) => T) {
    return class extends Base {
        average(): number {
            const sum = this.reduce((acc, num) => acc + num, 0);
            return sum / this.length;
        }
    };
}

const MyArray = Averageable(Array);
const numbers: MyArray<number> = [1, 2, 3, 4, 5];
const averageValue = numbers.average();

この例では、Averageable ミキシン関数を定義し、Array クラスに average() メソッドを追加します。これにより、MyArray クラスは通常の配列の機能に加えて、average() メソッドも持つようになります。

高階関数

高階関数は、関数を引数として受け取ったり、関数を返したりする関数です。高階関数を使用して、配列を操作するカスタム関数を作成できます。

function average(arr: number[]): number {
    const sum = arr.reduce((acc, num) => acc + num, 0);
    return sum / arr.length;
}

const numbers: number[] = [1, 2, 3, 4, 5];
const averageValue = average(numbers);

この例では、average 関数を定義し、配列を受け取って平均値を計算します。高階関数を使用することで、再利用可能なカスタム関数を作成できます。