[[406096]]

1.什么是裝飾器

裝飾器是一種特殊類型的聲明，它能夠被附加到類聲明，方法，訪問(wèn)符，屬性和參數(shù)上。

• 裝飾器是一個(gè)表達(dá)式
• 表達(dá)式被執(zhí)行后，返回一個(gè)函數(shù)
• 函數(shù)的輸入?yún)?shù)為：target，name和descriptor
• 執(zhí)行函數(shù)后，可能返回descriptor對(duì)象，用于配置target對(duì)象

裝飾器使用@expression形式，expression求值后必須返回一個(gè)函數(shù)，他會(huì)在運(yùn)行時(shí)被調(diào)用，被裝飾的聲明信息作為參數(shù)傳入。

例如：

// 定義裝飾器 
function testDecorator(target: any, key: string): void { 
  console.log("Target: ", target ); 
  console.log("key: ", key); 
} 
 
// 使用裝飾器 
class Boat{ 
  color: string = "yellow"; 
 
  get formattedColor(): string{ 
    return  `this boat color is ${this.color}`; 
     
  } 
   
  @testDecorator 
  pilot(): void{ 
    console.log("swish"); 
     
  } 
} 
 
// 實(shí)例化 
const boat = new Boat(); 
boat.pilot(); 
console.log(boat.formattedColor); 

運(yùn)行得到：

Target:  {} 
key:  pilot 
swish 
this boat color is yellow 

2.裝飾器分類

裝飾器根據(jù)其所裝飾的類型分為以下一種：

• 類裝飾器
• 屬性裝飾器
• 方法裝飾器
• 參數(shù)裝飾器

若要啟用實(shí)驗(yàn)性的裝飾器特性，你必須在命令行或tsconfig.json里啟用experimentalDecorators編譯器選項(xiàng)：

命令行:

tsc --target ES5 --experimentalDecorators 

tsconfig.json:

{ 
    "compilerOptions": { 
        "target": "ES5", 
        "experimentalDecorators": true 
    }     
} 

2.1 類裝飾器

類裝飾器用于類構(gòu)造函數(shù)，進(jìn)行監(jiān)聽(tīng)、修改或替換類定義，在類聲明之前進(jìn)行聲明(緊挨著類聲明)。

切記：

• 類裝飾器不能用在聲明文件中(.d.ts)，也不能用在任何外部上下文中。
• 類裝飾器表達(dá)式會(huì)在運(yùn)行時(shí)當(dāng)作函數(shù)被調(diào)用，類的構(gòu)造函數(shù)作為其唯一的參數(shù)。
• 如果類裝飾器返回一個(gè)值，它會(huì)使用提供的構(gòu)造函數(shù)來(lái)替換類的聲明。
• 如果你要返回一個(gè)新的構(gòu)造函數(shù)，你必須注意處理好原來(lái)的原型鏈。在運(yùn)行時(shí)的裝飾器調(diào)用邏輯中不會(huì)為你做這些。

類裝飾器聲明：

declare  type ClassDecorator = <TFunction extends Function>( 
  target: TFunction 
)=>TFunction | void; 

類裝飾器顧名思義，就是⽤來(lái)裝飾類的。它接收⼀個(gè)參數(shù)：

• target: TFunction - 被裝飾的類

栗子：

// 類裝飾器 
function classDecorator(constructor: typeof Boat){ 
  console.log(constructor); 
   
} 
 
// 使用類裝飾器 
@classDecorator 
class Boat{ 
 
} 

運(yùn)行結(jié)果：

[class Boat] 

2.2 方法裝飾器

方法裝飾器用于方法的屬性描述符，可以進(jìn)行監(jiān)聽(tīng)、修改或替換方法定義，在待修飾方法聲明前進(jìn)行聲明。方法裝飾器不能用在聲明文件(.d.ts)，重載或者任何外部上下文中。

方法裝飾器表達(dá)式會(huì)在運(yùn)行時(shí)當(dāng)作函數(shù)被調(diào)用，傳入下列3個(gè)參數(shù)：

• target：被裝飾的類
• key: 方法名
• descriptor: 屬性描述符

「注意：如果代碼輸出目標(biāo)版本小于ES5，屬性描述符將會(huì)是undefined。」

如果方法裝飾器返回一個(gè)值，它會(huì)被用作方法的屬性描述符。

舉個(gè)栗子：

// 定義裝飾器 
function testDecorator(target: any, key: string): void { 
  console.log("Target: ", target ); 
  console.log("key: ", key); 
} 
 
function logError(errorMessage: string){ 
  return function(target: any, key: string, desc: PropertyDescriptor){ 
    const method = desc.value; 
    desc.value = function(){ 
      try { 
        method(); 
      }catch(err){ 
        console.log(errorMessage); 
         
      } 
    } 
  } 
} 
 
// 使用裝飾器 
class Boat{ 
  color: string = "yellow"; 
 
  @testDecorator 
  get formattedColor(): string{ 
    return  `this boat color is ${this.color}`; 
     
  } 
 
  @logError("Oops boat was sunk in ocean") 
  pilot(): void{ 
    throw new Error() 
    console.log("swish"); 
     
  } 
} 
 
// 實(shí)例化 
const boat = new Boat(); 
boat.pilot(); 

運(yùn)行得到：

Target:  {} 
key:  formattedColor 
Oops boat was sunk in ocean 

2.3 屬性裝飾器

屬性裝飾器屬性描述符只能用來(lái)監(jiān)視類中是否聲明了某個(gè)名字的屬性，在屬性聲明前進(jìn)行聲明。

屬性裝飾器表達(dá)式會(huì)在運(yùn)行時(shí)當(dāng)做函數(shù)進(jìn)行調(diào)用，傳入兩個(gè)參數(shù)：

• target: 被裝飾的類
• key: 被裝飾類的屬性名字

注意：屬性描述符不作為參數(shù)傳入屬性裝飾器。因?yàn)槟壳斑€沒(méi)有辦法在定義一個(gè)原型對(duì)象時(shí)描述一個(gè)實(shí)例屬性，并且沒(méi)有辦法進(jìn)行建議監(jiān)聽(tīng)或修改一個(gè)屬性的初始化方法。

// 定義裝飾器 
function testDecorator(target: any, key: string): void { 
  console.log("Target: ", target ); 
  console.log("key: ", key); 
} 
 
function logError(errorMessage: string){ 
  return function(target: any, key: string, desc: PropertyDescriptor){ 
    const method = desc.value; 
    desc.value = function(){ 
      try { 
        method(); 
      }catch(err){ 
        console.log(errorMessage); 
         
      } 
    } 
  } 
} 
 
// 使用裝飾器 
class Boat{ 
  @testDecorator 
  color: string = "yellow"; 
 
  // @testDecorator 
  get formattedColor(): string{ 
    return  `this boat color is ${this.color}`; 
     
  } 
 
  @logError("Oops boat was sunk in ocean") 
  pilot(): void{ 
    throw new Error() 
    console.log("swish"); 
     
  } 
} 

運(yùn)行結(jié)果：

Target:  {} 
key:  color 

2.4 參數(shù)裝飾器

參數(shù)裝飾器用于類構(gòu)造函數(shù)或方法聲明。接收三個(gè)參數(shù)：

• target: 被裝飾的類
• key：方法名
• index：方法中的參數(shù)索引值

// 定義裝飾器 
function testDecorator(target: any, key: string): void { 
  console.log("Target: ", target ); 
  console.log("key: ", key); 
} 
 
function logError(errorMessage: string){ 
  return function(target: any, key: string, desc: PropertyDescriptor){ 
    const method = desc.value; 
    desc.value = function(){ 
      try { 
        method(); 
      }catch(err){ 
        console.log(errorMessage); 
         
      } 
    } 
  } 
} 
 
// 參數(shù)裝飾器 
function parameterDecorator(target: any, key: string, index: number){ 
  console.log(key, index); 
   
} 
 
// 使用裝飾器 
class Boat{ 
  @testDecorator 
  color: string = "yellow"; 
 
  // @testDecorator 
  get formattedColor(): string{ 
    return  `this boat color is ${this.color}`; 
     
  } 
 
  @logError("Oops boat was sunk in ocean") 
  pilot(): void{ 
    throw new Error() 
    console.log("swish"); 
     
  } 
 
 
  fast( 
    @parameterDecorator speed: string, 
    @parameterDecorator generateWake: boolean 
  ): void{ 
    if(speed === "fast"){ 
      console.log("swish"); 
    }else{ 
      console.log("nothing"); 
       
    } 
  } 
} 

運(yùn)行結(jié)果：

Target:  {} 
key:  color 
fast 1 
fast 0 

小結(jié)

我們看到裝飾器很方便為我們結(jié)果了許多問(wèn)題。裝飾器根據(jù)其裝飾的對(duì)象不同，分為：類裝飾器、屬性裝飾器、方法裝飾器、參數(shù)裝飾器。