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
論文。 😉😊