TypeScript-裝飾器

裝飾器概述

• Decorator 是 ES7 的一個新語法，目前仍處於 提案中
• 裝飾器是一種特殊類型的聲明，它能夠被附加到類，方法， 訪問器，屬性或參數上

被添加到不同地方的裝飾器有不同的名稱和特點：

• 附加到類上, 類裝飾器
• 附加到方法上, 方法裝飾器
• 附加到訪問器上, 訪問器裝飾器
• 附加到屬性上, 屬性裝飾器
• 附加到參數上, 參數裝飾器

裝飾器基本格式

普通裝飾器

function test(target) {
    console.log('test');
}

@test
class Person {

}

如上代碼的含義為給 Person 這個類綁定了一個 普通的裝飾器，這個裝飾器的代碼會在定義類之前執行, 並且在執行的時候會把這個類傳遞給裝飾器，除了如上的步驟還是不行的編譯器還是會報錯，還需要開啟 experimentalDecorators 修改 tsconfig.json：

"experimentalDecorators": true,

裝飾器工廠

• 如果一個函數返回一個回調函數, 如果這個函數作為裝飾器來使用, 那么這個函數就是 裝飾器工廠

function test(target) {
    console.log('test');
}

function demo() {
    console.log('demo out');
    return (target) => {
        console.log('demo in');
    }
}

@demo()
class Person {

}

如上代碼的含義為給 Person 這個類綁定了一個 裝飾器工廠，在綁定的時候由於在函數后面寫上了 (), 所以會先執行裝飾器工廠拿到真正的裝飾器, 真正的裝飾器會在定義類之前執行, 所以緊接着又執行了里面。

裝飾器組合

• 普通的裝飾器可以和裝飾器工廠結合起來一起使用

結合起來一起使用的時候, 會先 從上至下 的執行所有的裝飾器工廠, 拿到所有真正的裝飾器, 然后再 從下至上 的執行所有的裝飾器：

function test(target) {
    console.log('test');
}

function demo() {
    console.log('demo out');
    return (target) => {
        console.log('demo in');
    }
}

function abc(target) {
    console.log('abc');
}

function def() {
    console.log('def out');
    return (target) => {
        console.log('def in');
    }
}

@test
@demo()
@def()
@abc
class Person {

}