TypeScriptでこのタイプを多形化する

jQueryを覚えていますか？ええ、私も…jQueryがJavaScriptの世界を席巻するために使用したもののひとつは、メソッドの連鎖でした。単一の要素に複数のメソッドを適用できることは、ライブラリの採用における大きな要因でした。また、オブジェクト指向プログラミングでは、ポリモーフィズムがその柱の1つです。

では、ポリモーフィズムとは何ですか？

ポリモーフィズムとは、オブジェクトが使用される方法と場所に応じて、さまざまな形を表現するオブジェクトの機能です。

TypeScriptでメソッドチェーンとポリモーフィックな動作をどのように実装しますか？ 多形このタイプが助けになります。

ポリモーフィックこのタイプを使用すると、クラスのメソッドの結果としてthisが返されます。 thisは、現在のクラスのインスタンスを参照します。別のクラスが前のクラスを拡張する場合、thisは拡張されたクラスのインスタンスを参照します。このように、thisは、呼び出された場所に応じてフォームを変更します。これはポリモーフィズムと呼ばれます。また、thisを返すため、クラスまたはその親クラスにある他のメソッドを呼び出すことができます。ここで、メソッドチェーンが機能します。

レンタカーサービスを運営しているとしましょう。したがって、Carクラスには、Rent、Record、およびReturnの3つのメソッドがあります。

class Car {
  Rent(type:string) : this {
    console.log(`${type} has been rented.`);
    return this;
  }

  Record() : this {
    console.log(`Car was rented at ${new Date().toLocaleString()}`);
    return this;
  }

  Return(type:string) : this {
    console.log(`${type} has been returned.`);
    return this;
  }
}

Carクラスのメソッドは、thisを返します。これにより、メソッドが多態的になります。進むにつれて、それはより明確になります。 ElectricCarとGasCarという2つの新しいクラスを作成してみましょう。どちらも、Carクラスを拡張します。

class ElectricCar extends Car {
  Charge() : this {
    console.log(`Electric car has been charged.`);
    return this;
  }
}

class GasCar extends Car {
  Refill() : this {
    console.log(`Gas car has been refilled.`);
    return this;
  }
}

Carクラスのメソッドと同様に、ElectricCarとGasCarの両方のメソッドはthisを返します。

たとえば、誰かが電気自動車を借りたいと思ったので、ElectricCarクラスのインスタンスを作成します。顧客に渡す前に車を充電する必要があるため、ElectricCarクラスに存在するChargeメソッドを呼び出します。これで、Chargeメソッドはthisを返すため、CarクラスからRentメソッドをすぐにチェーンできます。

最終的なコードは次のようになります。

let electricCar = new ElectricCar();
electricCar
  .Rent("Electric car") // Electric car has been rented.
  .Record() // logs current date and time

thisを返すだけで、メソッドを美しくチェーンする方法をご覧ください。

これで、顧客がレンタカーを返却するときに、さまざまなメソッドのセットをelectricCarにチェーンして、返却されたことを記録できます。

electricCar.Return("Electric car") // Electric car has been returned.
  .Record() // logs current date and time.
  .Charge() // Electric car has been charged.

ここでは、ポリモーフィズムの効果を確認します。つまり、Recordメソッドから返されるthisは通常、Chargeメソッドを含まないCarクラスのインスタンスになりますが、 thisキーワードがElectricCarクラスのインスタンスを表すようになったため、引き続きChargeメソッドを呼び出すことができます。つまり、thisキーワードの形式が変更され、まさにそれがポリモーフィズムです。

ポリモーフィズムの別の表示は、以下のコードに示されています。 GasCarクラスのインスタンスを作成することで、electricCarのChargeではなく、メソッドチェーンのRecordの後にRefillを呼び出すことができます。 ] 例。繰り返しになりますが、thisの形式が変更されました。

let gasCar = new GasCar();
gasCar
  .Rent("Gas car") // Gas car has been rented.
  .Record() // logs current date and time

gasCar.Return("Gas car") // Gas car has been returned.
  .Record() // logs current date and time.
  .Refill() // Gas car has been refilled.

Polymorphic this type を活用することで、呼び出し方法に基づいて異なる結果を返すAPIを作成できます。あなたが私に尋ねればかなりクールなもの。 😎

最後に、この記事では1つのクラスから拡張しました。これは、TypeScriptで許可されている最大のクラスです。複数のクラスから拡張したい場合は、その方法を示す前のの記事、またはそのために作成したライブラリを確認してください。 👌

それでおしまい。 thisの記事を楽しんでいただけたでしょうか。 😉😊