[TypeScript] ジェネリックで、引数で渡されたインスタンスのメソッドを使いたい

想定するケース

  • HogeService というクラスがある
  • HogeService のメソッド: exec() は他のクラスのインスタンスを引数で受け取る
  • HogeService は exec() において、引数で渡されたインスタンスのメソッドを実行する
  • ただし HogeService のメソッドに引数でセットされるインスタンスのクラスは固定ではない

つまり次のようなケースを想定する。

  • HogeService

    HogeService
    export class HogeService {
      public exec(instance: any) {
        instance.exec();
      }
    }
    
  • 引数で渡されるインスタンスのクラス-1 ( Bar1Service )

    Bar1Service
    export class Bar1Service {
      public exec() {
        console.log('Bar1Service-exec()');
      }
    }
    
  • 引数で渡されるインスタンスのクラス-2 ( Bar2Service )

    Bar2Service
    export class Bar2Service {
      public exec() {
        console.log('Bar2Service-exec()');
      }
    }
    

HogeService のインスタンスメソッド: exec() は Bar1Service、もしくは Bar2Service のインスタンスを受け取る。
このとき HogeService が受け取るインスタンスの型を any ではなく ジェネリック で受け取りたいのだが、単純に HogeService のインスタンスメソッドで

  • 単純なジェネリクスの指定

    HogeService
    export class HogeService {
      public exec<T>(instance: T) {
        instance.exec();
      }
    }
    

とするだけでは

  • 文法エラー

    エラー
    [ts] プロパティ 'exec' は型 'T' に存在しません。
    

が出てしまう。
本記事ではこのエラーが出ずにジェネリックでインスタンスを受け取り、そのインスタンスのメソッドを使用する方法について提示する。

解決方法

解決方法は以下のとおり。

  • 引数として渡されるクラス
    • 抽象クラスを用意する
    • 抽象クラスを継承する
  • インスタンスを受け取る側のクラス
    • メソッド定義時、 ジェネリックを抽象クラスを拡張した形式で指定する

これでジェネリックでインスタンスを受け取り、そのインスタンスのメソッドの実行を実現できる。
以下、実際にコードを記述する。

引数として渡されるクラス

抽象クラスを用意する

AbstractBar
export abstract class AbstractBarService {
  public abstract exec();
}

抽象クラスを継承する

Bar1Service
import { Injectable } from '@angular/core';
import { AbstractBarService } from './abstract-bar.service';

@Injectable()
export class Bar1Service extends AbstractBarService{

  constructor() {
    super();
  }

  public exec() {
    console.log('Bar1Service-exec()');
  }
}
Bar2Service
import { Injectable } from '@angular/core';
import { AbstractBarService } from './abstract-bar.service';

@Injectable()
export class Bar2Service extends AbstractBarService {

  constructor() {
    super();
  }

  public exec() {
    console.log('Bar2Service-exec()');
  }
}

インスタンスを受け取る側のクラス

メソッド定義時、ジェネリックを抽象クラスを拡張した形式で指定する

HogeService
import { Injectable } from '@angular/core';
import { AbstractBarService } from './abstract-bar.service';

@Injectable()
export class HogeService {

  constructor() { }

  public exec<T extends AbstractBarService>(instance: T) {
    instance.exec();
  }
}

まとめ

以上で掲題の「TypeScript のジェネリックで、引数で渡されたインスタンスのメソッドを使いたい」が実現できた。
本文の繰り返しとなるが、ポイントは

  • 引数となるクラス側
    • 抽象クラスを用意する
  • 引数を受け取るクラス側
    • メソッド定義時、ジェネリックを抽象クラスを拡張した形式で指定する

である。
これで TypeScript による型定義の恩恵を受けられるし、コード補間機能 ( Visual Studio Code で確認 ) の恩恵も受けられる。

ソースコード

今回の記事で作成したコードは こちら にアップしてあるのでご参考まで。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.