摘要：本文從裝飾模式出發(fā)，聊聊中的裝飾器和注解。該函數(shù)的函數(shù)名。不提供元數(shù)據(jù)的支持。中的元數(shù)據(jù)操作可以通過包來實現(xiàn)對于元數(shù)據(jù)的操作。

??隨著Typescript的普及，在KOA2和nestjs等nodejs框架中經?？吹筋愃朴趈ava spring中注解的寫法。本文從裝飾模式出發(fā)，聊聊Typescipt中的裝飾器和注解。

什么是裝飾者模式
Typescript中的裝飾器
Typescript中的注解
總結

原文地址：https://github.com/forthealll...

歡迎star

??最近在看nestjs等支持Typescript的node框架，經常看到這樣一種寫法：

import { Controller, Get } from "@nestjs/common";

@Controller("cats")

export class CatsController {
  @Get()
  findAll() {
    return "This action returns all cats";
  }
}

??上述代碼定義了一個處理url為“/cats”的控制器，該控制器對于url為“/cats”的get方法執(zhí)行findAll()函數(shù)，返回相應的字符串。

??在上述的代碼中，用@Controller("cats")修飾CatsController類，通過@Get來修飾類中的findAll方法，這就是典型的裝飾者模式。通過@Controller("cats")和@Get修飾后的類CatsController，簡單來說，就是擁有了豐富的“內涵”。

下面看看具體裝飾者模式的定義：

我們知道繼承模式是豐富子元素“內涵”的一種重要方式，不管是繼承接口還是子類繼承基類。而裝飾者模式可以在不改變繼承關系的前提下，包裝先有的模塊，使其內涵更加豐富，并不會影響到原來的功能。與繼承相比，更加的靈活。

javascript中的裝飾器處于建議征集的第二階段，通過babel和Typescrit都可以實現(xiàn)裝飾器的語法。

Typescript中的裝飾器與類相關，分別可以修飾類的實例函數(shù)和靜態(tài)函數(shù)、類本身、類的屬性、類中函數(shù)的參數(shù)以及類的set/get存取器，下面來意義介紹。

下面來介紹一下用裝飾器來修飾函數(shù)，首先來看一個例子：

let temple;
function log(target, key, descriptor) {
  console.log(`${key} was called!`);
  temple = target;
}
class P {
    @log
    foo() {
      console.log("Do something");
    }
}

const p = new P()
p.foo()
console.log(P.prototype === temple) //true

上述是實例方法foo中我們用log函數(shù)修飾，log函數(shù)接受三個參數(shù)，通過P.prototype === temple(target)可以判斷，在類的實例函數(shù)的裝飾器函數(shù)第一個參數(shù)為類的原型，第二個參數(shù)為函數(shù)名本身，第三個參數(shù)為該函數(shù)的描述屬性。

具體總結如下，對于類的函數(shù)的裝飾器函數(shù)，依次接受的參數(shù)為：

target：如果修飾的是類的實例函數(shù)，那么target就是類的原型。如果修飾的是類的靜態(tài)函數(shù)，那么target就是類本身。

key： 該函數(shù)的函數(shù)名。

descriptor：該函數(shù)的描述屬性，比如 configurable、value、enumerable等。

從上述的例子中我們可以看到，用裝飾器來修飾相應的類的函數(shù)十分方便：

@log
foo() {
  ...
}

裝飾函數(shù)也可以直接修飾類：

let temple
function foo(target){
   console.log(target);
   temple = target
}
@foo
class P{
   constructor(){
     
   }
}

const p = new P();
temple === P //true

當裝飾函數(shù)直接修飾類的時候，裝飾函數(shù)接受唯一的參數(shù)，這個參數(shù)就是該被修飾類本身。上述的例子中，輸出的target就是類P的本身。

此外，在修飾類的時候，如果裝飾函數(shù)有返回值，該返回值會重新定義這個類，也就是說當裝飾函數(shù)有返回值時，其實是生成了一個新類，該新類通過返回值來定義。

舉例來說：

function foo(target){
   return class extends target{
      name = "Jony";
      sayHello(){
         console.log("Hello "+ this.name)
      }
   }
}
@foo
class P{
   constructor(){
     
   }
}

const p = new P();
p.sayHello(); // 會輸出Hello Jony

上面的例子可以看到，當裝飾函數(shù)foo有返回值時，實際上P類已經被返回值所代表的新類所代替，因此P的實例p擁有sayHello方法。

下面我們來看類的屬性的裝飾器,裝飾函數(shù)修飾類的屬性時，在類實例化的時候調用屬性的裝飾函數(shù)，舉例來說：

function foo(target,name){
   console.log("target is",target);
   console.log("name is",name)
}
class P{
   @foo
   name = "Jony"
}
const p = new P();
//會依次輸出 target is f P()  name is Jony

這里對于類的屬性的裝飾器函數(shù)接受兩個參數(shù)，對于靜態(tài)屬性而言，第一個參數(shù)是類本身，對于實例屬性而言，第一個參數(shù)是類的原型，第二個參數(shù)是指屬性的名字。

接著來看類函數(shù)參數(shù)的裝飾器，類函數(shù)的參數(shù)裝飾器可以修飾類的構建函數(shù)中的參數(shù)，以及類中其他普通函數(shù)中的參數(shù)。該裝飾器在類的方法被調用的時候執(zhí)行，下面來看實例：

function foo(target,key,index){
   console.log("target is",target);
   console.log("key is",key);
   console.log("index is",index)
}
class P{
   test(@foo a){
   }
}
const p = new P();
p.test("Hello Jony")
// 依次輸出 f P() , test , 0 

類函數(shù)參數(shù)的裝飾器函數(shù)接受三個參數(shù)，依次為類本身，類中該被修飾的函數(shù)本身，以及被修飾的參數(shù)在參數(shù)列表中的索引值。上述的例子中，會依次輸出 f P() 、test和0。再次明確一下修飾函數(shù)參數(shù)的裝飾器函數(shù)中的參數(shù)含義：

target： 類本身

key：該參數(shù)所在的函數(shù)的函數(shù)名

index： 該參數(shù)在函數(shù)參數(shù)列表中的索引值

從上面的Typescrit中在基類中常用的裝飾器后，我們發(fā)現(xiàn)：

裝飾器可以起到分離復雜邏輯的功能，且使用上極其簡單方便。與繼承相比，也更加靈活，可以從裝飾類，到裝飾類函數(shù)的參數(shù)，可以說武裝到了“牙齒”。

在了解了Typescrit中的裝飾器之后，接著我們來看Typescrit中的注解。

什么是注解，所謂注解的定義就是：

為相應的類附加元數(shù)據(jù)支持。

所謂元數(shù)據(jù)可以簡單的解釋，就是修飾數(shù)據(jù)的數(shù)據(jù)，比如一個人有name，age等數(shù)據(jù)屬性，那么name和age這些字段就是為了修飾數(shù)據(jù)的數(shù)據(jù)，可以簡單的稱為元數(shù)據(jù)。

元數(shù)據(jù)簡單來說就是可以修飾某些數(shù)據(jù)的字段。下面給出裝飾器和注解的解釋和區(qū)別：

裝飾器：定義劫持，可以對類，類的方法，類的屬性以及類的方法的入?yún)⑦M行修改。不提供元數(shù)據(jù)的支持。

注解：僅提供元數(shù)據(jù)的支持。

兩者之間的聯(lián)系：

通過注解添加元數(shù)據(jù)，然后在裝飾器中獲取這些元數(shù)據(jù)，完成對類、類的方法等等的修改，可以在裝飾器中添加元數(shù)據(jù)的支持，比如可以可以在裝飾器工廠函數(shù)以及裝飾器函數(shù)中添加元數(shù)據(jù)支持等。

可以通過reflect-metadata包來實現(xiàn)對于元數(shù)據(jù)的操作。首先我們來看reflect-metadata的使用，首先定義使用元數(shù)據(jù)的函數(shù)：

const formatMetadataKey = Symbol("format");

function format(formatString: string) {
    return Reflect.metadata(formatMetadataKey, formatString);
}

function getFormat(target: any, propertyKey: string) {
    return Reflect.getMetadata(formatMetadataKey, target, propertyKey);
}

這里的format可以作為裝飾器函數(shù)的工廠函數(shù)，因為format函數(shù)返回的是一個裝飾器函數(shù)，上述的方法定義了元數(shù)據(jù)Sysmbol("format"),用Sysmbol的原因是為了防止元數(shù)據(jù)中的字段重復，而format定義了取元數(shù)據(jù)中相應字段的功能。

接著我們來在類中使用相應的元數(shù)據(jù)：

class Greeter {
    @format("Hello, %s")
    name: string;

    constructor(name: string) {
        this.name = message;
    }
    sayHello() {
        let formatString = getFormat(this, "name");
        return formatString.replace("%s", this.name);
    }
}

const g = new Greeter("Jony");
console.log(g.sayHello());

在上述中，我們在name屬性的裝飾器工廠函數(shù)，執(zhí)行@format("Hello, %s")，返回一個裝飾器函數(shù)，且該裝飾器函數(shù)修飾了Greeter類的name屬性，將“name”屬性的值寫入為"Hello, %s"。

然后再sayHello方法中，通過getFormat(this,"name")取到formatString為“Hello,%s”.

通過裝飾器，可以方便的修飾類，以及類的方法，類的屬性等，相比于繼承而言更加靈活，此外，通過注解的方法，可以在Typescript中引入元數(shù)據(jù)，實現(xiàn)元編程等。特別是在angularjs、nestjs中，大量使用了注解，特別是nestjs構建了類似于java springMVC式的web框架。