ES7 裝飾器使用示例

ES7 裝飾器使用示例

示例代碼：

// ts 裝飾器

// 類裝飾器
function aClass(target: any): void {
    // target 爲當前裝飾的類
    target.prototype.name = '動態擴展的屬性'
    target.prototype.run = () => {
        console.log('2.動態擴展的方法')
    }
}

// 類裝飾器（帶參數）
function bClass(name: string): Function {
    return function(target: any) {
        console.log('1.' + name)
        target.prototype.name = name
    }
}

// 類裝飾器
function cClass(target: any): any {
    return class extends target {
        url: string = '//proxy.xxx'
    }
}

// 屬性裝飾器
function aProperty(params: any) {
    return function(target: any, attr: any) {
        // 執行在被裝飾的類的構造方法之前
        target[attr] = params
    }
}

// 方法裝飾器
function get(params: any) {
    return function(target: any, methodName: any, desc: any) {
        var oMethod = desc.value
        desc.value = function(...args: any[]) {
            // ...something other
            return oMethod.apply(this, args)
        }
    }
}

// 方法參數裝飾器（不常用）
function logParams(params: any) {
    return function(target: any, methodName: any, paramsIndex: any) {
        target.fullUrl = params + ':' + target.url
    }
}

@aClass
@bClass('工廠裝飾器')
@cClass
class HttpClinet {
    @aProperty('//adapter.xxx')
    public url: string
    constructor() {
        this.url = '//api.xxx'
    }
    @get('//get')
    getUrl(@logParams('https') ...args: any) {
        console.log('3.' + JSON.stringify(args))
        return this.url
    }
}

const h: any = new HttpClinet()
h.run()
console.log('4.' + h.getUrl('http'))
console.log('5.' + h.fullUrl)

node 執行ts 轉換後的代碼，結果：

1.工廠裝飾器
2.動態擴展的方法
3.["http"]
4.//proxy.xxx
5.https://adapter.xxx

至此，結束。