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

投稿日: 2022-04-20 2022-10-08
タグ: TypeScript

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

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

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

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

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

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

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. これにより、メソッドが多態的になります。進むにつれて、それはより明確になります。つまり、2つの新しいクラスを作成しましょう ElectricCar と GasCar どちらも拡張します 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 クラス。お客様に渡す前に車を充電する必要があるため、 Charge 私たちに存在する方法 ElectricCar クラス。さて、 Charge メソッドは this、すぐにチェーンできます Rent 私たちからの方法 Car クラス。

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

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.

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

ポリモーフィズムの別の表示は、以下のコードに示されています。のインスタンスを作成することにより GasCar クラス、私たちは呼び出すことができます Refill 後 Record 私たちのメソッドチェーンでは、 Charge の中に electricCar 例。もう一度、私たちの 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 論文。 😉😊

getdocs

13036