Angular2 の雛形に登場してきた、関数を@アットマーク付きで実行している何か変なが何かというとコレである。 イロイロサイトを調べて眺めたが、なんだかよくわからんｗ

公式参照 Decorators · TypeScript

この Angular2 の例では Component デコーレータがその下に書いてある AppComponent クラスを拡張している。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

引数無しバージョン。引数なしなのでつまり、このように使う版

@hoge
class Piyo{
}

この場合は直接的にこのように書く

function hoge(clazz){
    clazz.prototype.fuga = function(){
        return "fugafugafuga";
    };
    return null;
}

decorator を担当するメソッドの第一引数に対象の class オブジェクトが入ってくるのでこれを自由に拡張できる。今回ならばその prototype を拡張してメソッドを追加している。直接的に class を拡張しているのでこれで完了(return null)する。

prototype を拡張していることからも分かる通り、この class オブジェクトというのは JS の Function オブジェクト的なオブジェクトになる。

このように使う版

@hoge("ふがふが")
class Piyo{
}

この場合は無しバージョン違い Decorator となる関数を生成する関数を作る

function hoge(message){
    return function(clazz){
        clazz.prototype.fuga = function(){
            return message;  // ← とったパラメータをここで使う
        };
    };
}

このように無しバージョンの関数を所定のパラメータを取得する関数で生成している。パラメータ自体はクロージャで decorator 内部に持ち込むのである。

引数がなかったとしても、このように書くと、引数有り版と同様の記述を要求される

@hoge()
class Piyo{
}

function hoge(){
    return function(clazz){
        clazz.prototype.fuga = function(){
            return "fugafugafuga";
        };
    };
}