【JavaScript】 my first time of decoratore with TypeScript

2020年3月19日2020年3月20日

kenjimorita

今またTypeScript熱がある。

今パッケージのアップデートをやっていて3.7.2から3.8.3へ移行したPRを投げている。

一方、家では、

今まで知らなかったTypeScriptのことを知りたくて

いろいろ読みあさっている。

https://www.udemy.com/course/typescript-complete/

これ買ったのはちょっとデコレーターについてなんて言っているか知りたいし、安かったので買った

いろいろなところであ、なるほど!という発見がありますね...

てことで、これは

デコレーター

引数に取りたい場合ファクトリーを作って渡し、コンストラクターを取る関数を返す

function LogingFactory(arg: string) {
  return function(constructor: Function) {
    console.log(arg);
  };
}

@LogingFactory("fafa")
class Name {
  private name: string;
  constructor(name: string) {
    this.name = name;
  }
  set(name: string) {
    this.name = name;
  }
  get() {
    return this.name;
  }
}

class TeacherName extends Name {
  private age: number;
  constructor(name: string, age: number) {
    super(name);
    this.age = age || 0;
  }
  getAge() {
    return this.age;
  }
  setAge(age: number) {
    this.age = age;
  }
  addAge() {
    this.age = this.age++;
  }
}


ネタバレするのであまり言いませんが、デコレーターに親しみがない方は安いうちに買った方が良いです。

このコードは序章にすぎず、
動画の中ではAngularのように
テンプレートを渡したり、
複数のデコレーターを実行する方法や
クラスを書き換える方法など、
え、、そんなことできるのしらなかったてなった

TypeScriptがもうAngularに見えてくる...みたいな印象を受けて、
あれ、これこのままTSが人気になったらそっちの方にいくのか??
みたいな気さえしました...

実際にAngular9をちょっとやってみます..
なんかそっちの方がTS学べそうな気配すらしてきた
(あと最近案件でできるか聞かれた)