継承の概念#
継承の概念を例を挙げて説明します：
例えば、張三は車を買いたいと思っていますが、彼の父親はメルセデスベンツを持っているので、彼の父親が彼に車を与えることを継承と呼びます。
デコレータの概念#
張三はメルセデスベンツを持っていますが、ホイールを変えたり、ステアリングホイールを変えたりしたいと思っています。彼の兄弟の援助により、新しいセットを取り付けました。
結論#
したがって、継承は親子関係に属し、親はプライベートプロパティを制限し、protected を使用して子クラスが変更または上書きすることを禁止することができます。一方、デコレータは子クラスを装飾することができます。プロパティ、メソッド、さらにはクラス全体を装飾することができます。まるで女の子が化粧をするようなものです。
デコレータの原理#
デコレータは実験的な機能であり、本質的には Function、class です。
したがって、デコレータを使用するためには、各プロジェクトで ts.config で experimental オプションを有効にする必要があります。
function decartor(target:object){
}
@decartor
class ex{
}
クラスデコレータ#
// classDecoratorをクリックすると、targetを渡す必要があることがわかります
// このtargetは渡す必要のあるコンストラクタexampleです
const OperationDecorate:classDecorator=
(target:Function)=>{
console.log(target) //[Function:example]
target.prototype.addOne=function(){
console.log("これはデコレータの新しいメソッドです")
}
target.prototype.name="oru private"
}
@OperationDecorate
class example{
public addone(){
}
private name
}
const t1=new example()
console.log(t1.name)
t1.addone()
結論#
デコレータは、クラスのコンストラクタを取得し、プロトタイプチェーンに各プロパティやメソッドを追加することによって、インスタンス化後にプロトタイプチェーンを介してプロパティを取得できます。
**！！** デコレータは、オブジェクトのインスタンス化時に使用される構文糖です。
@Operation===Operation(example)
デコレータの重ね合わせ#
const OperationDecorate:classDecorator=
(target:Function)=>{
console.log(target) //[Function:example]
target.prototype.addOne=function(){
console.log("これはデコレータの新しいメソッドです")
}
target.prototype.name="oru private"
}
const musicDecorator:classDecorator=
(target: Function):void=>{
console.log("音楽を再生する")
}
@musicDecorator
@OperationDecorate
class example{
}
今、特定の条件がトリガーされると、ユーザーにメッセージをブロードキャストするシナリオを考えてみましょう。たとえば、ログインに成功した場合は成功メッセージを表示し、支払いに成功した場合は支払いメッセージを表示します。以下のように実現します：
const messageDecorator:classDecorator=
(target:Function)=>{
target.prototype.message=
(content:string)=>{
log(content+"成功")
}
}
@messageDecortor
class example{
private message:void
payLoad(){
this.message("支払い") //方法1
}
}
new example().message("支払い") //方法2
結論：#
これにより、インスタンス化時にプロトタイプメソッドを呼び出すことができるだけでなく、各メソッド内でそのプロトタイプメソッドを指すこともできます🤓。
デコレータファクトリ#
デコレータの高階関数です。
const messageDecorator:classDecorator=
(id)=>{
return (target:Function)=>{
target.prototype.message="6"
target.protptype.addone=()=>{
fetch(`/some/${id}`).then(res=>log(res))
}
}
}
メソッドデコレータ#
目的：クラス内のメソッドを装飾する
const applyMethods:MethodDecorator=(...args:any[])
=>{
console.log(args)
//[{create:Function},
'create',
{value:Function() writeable:boolean,eumerabe:boolean
}]
let method = args[2].value
method=()=>{
console.log(2)
}
method()
}
class example{
@applyMethods()
public create(){
console.log(1)
}
}