TypeScriptの基礎的な知識(アクセサーデコレータ)について学ぶ

学んだこと

アクセサーデコレータ

• メソッドデコレータと同じ書き方をする

unction PropertyLogging(target: any, propertyKey: string){
  console.log()
}

function MethodLogging(target: any, propertyKey: string, descriptor: PropertyDescriptor){
  console.log(descriptor)
}

function AccessorLogging(target: any, propertyKey: string, descriptor: PropertyDescriptor){
  console.log(descriptor)
}


@Component("<h1></h1>", "#app")
@Logging("LoggingUser")
Class User{
  @PropertyLogging
  name = "Quill";
  constructor(private _age: number){
    console.log("User was created!")
  }
  @AccessorLogging
  get age(){
    return this._age;
  }
  set age(value){
    this._age = value
  }
  @MethodLogging
  greeting(){
    console.log("Hello")
  }
}

戻り値を使って、実践的なメソッドデコレータを使う方法

unction PropertyLogging(target: any, propertyKey: string){
  console.log()
}

function MethodLogging(target: any, propertyKey: string, descriptor: PropertyDescriptor){
  console.log(descriptor)
}

function AccessorLogging(target: any, propertyKey: string, descriptor: PropertyDescriptor){
  console.log(descriptor)
}

// 戻り値にメソッドデコレータを返すようにする
function enumerable(isEnumerable: boolean){
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor){
    return {
      enumerable: isEnumerable
    }
  }
}

@Component("<h1></h1>", "#app")
@Logging("LoggingUser")
Class User{
  @PropertyLogging
  name = "Quill";
  constructor(private _age: number){
    console.log("User was created!")
  }
  @AccessorLogging
  get age(){
    return this._age;
  }
  set age(value){
    this._age = value
  }
  @MethodLogging
  greeting(){
    console.log("Hello")
  }
}

パラメータデコレータ

• 関数の引数にデコレータをつけることができる

// 一番最後の引数が異なる
// 何番目の引数かの情報が入る
function ParameterLogging(target: any, propertyKey: string, parameterIndex: number){
  console.log(descriptor)
}

@Component("<h1></h1>", "#app")
@Logging("LoggingUser")
Class User{
  @PropertyLogging
  name = "Quill";
  constructor(private _age: number){
    console.log("User was created!")
  }
  @AccessorLogging
  get age(){
    return this._age;
  }
  set age(value){
    this._age = value
  }
  @MethodLogging
  greeting(@ParameterLogging message: string){
    console.log("Hello")
  }
}