ts的裝飾器

阿新 • • 發佈：2022-04-15

console.log('裝飾器.......')
// 裝飾器就是一個方法，可以注入到類，方法，屬性上來拓展類，屬性，方法，引數的功能
// 常見：類裝飾器，屬性裝飾器，方法裝飾器，引數裝飾器
// 寫法：1.普通裝飾器（無法傳參） 2.裝飾器工廠（可傳參）

// 1.類裝飾器
// 類裝飾器在類宣告之前被宣告（緊靠著類宣告）。 類裝飾器應用於類建構函式，可以用來監視，修改或替換類定義。
// 普通裝飾器（無法傳參）
function logClass(params: any) {
    console.log(params)
    // 通過原型鏈拓展類，屬性，方法，引數
    params.prototype.apiUrl = 'xxx'
    params.prototype.run  
= function () {
        console.log('run...........')
    }
}

@logClass
class HttpClient {
    constructor() {}
    getData() {}
}
let http: any = new HttpClient()
console.log(http)
http.run()

// 裝飾器工廠（可傳參）
function logClass1(params: string) {
    return function (target: any) {
        console.log(params)
        console.log(target)
        target.prototype.apiUrl  
= params
    }
}

@logClass1('hello')
class HttpClient1 {
    constructor() {}
    getData() {}
}
let http1: any = new HttpClient1()
console.log(http1)

// 過載建構函式
function logClass2(target: any) {
    return class extends target {
        api: any = 'api2222'
        getData() {
            console.log( 
this.api + '333')
        }
    }
}

@logClass2
class HttpClient2 {
    public api: string | undefined
    constructor() {
        this.api = 'api11111'
    }
    getData() {
        console.log(this.api)
    }
}
let http2: any = new HttpClient2()
console.log(http2)
http2.getData()

// 2.屬性裝飾器
// 屬性裝飾器表示式會在執行時被當作函式呼叫
// 接收兩個引數
// 1. 對於靜態成員是類的建構函式，對於例項成員是類的原型物件
// 2. 成員的名字

// 類裝飾器
function logClass3(params: string) {
    return function (target: any) {
        // console.log(params)
        // console.log(target)
        target.prototype.apiUrl = params
    }
}

// 屬性裝飾器
function logProperty(params: string) {
    return function (target: any, attr: any) {
        // console.log(params)
        // console.log(target)
        target[attr] = params
    }
}

@logClass3('hello33333')
class HttpClient3 {
    @logProperty('hello4444')
    public api: any | undefined
    constructor() {}
    getData() {}
}
let http3: any = new HttpClient3()
console.log(http3)

// 3.方法裝飾器
// 應用在方法的屬性描述上，可以用來監視、修改、替換方法定義
// 接收三個引數
// 1. 對於靜態成員是類的建構函式，對於例項成員是類的原型物件
// 2. 成員的名字
// 3. 成員的屬性的描述
function logClass4(params: string) {
    return function (target: any, methodsName: any, desc: any) {
        console.log(target)
        console.log(methodsName)
        console.log(desc)
        console.log(desc.value)
        let o = desc.value
        desc.value = function (...args: any[]) {
            args = args.map((item) => {
                return String(item) + params
            })
            o.apply(this, args)
        }
    }
}

class HttpClient4 {
    public api: any | undefined
    constructor() {}
    @logClass4('方法裝飾器方法裝飾器方法裝飾器方法裝飾器')
    getData(...args: any[]) {
        console.log(args)
        console.log('getDatagetDatagetData')
    }
}
let http4: any = new HttpClient4()
http4.getData(123, 'xxx')

// 4.引數裝飾器
// 引數裝飾器表示式會在執行時當作函式被呼叫，可以使引數裝飾器為類的原型增加一些元素資料
// 1. 對於靜態成員是類的建構函式，對於例項成員是類的原型物件
// 2. 引數的名字
// 3. 引數索引
function logClass5(params: string) {
    return function (target: any, methodsName: any, desc: any) {
        console.log(target)
        console.log(methodsName)
        console.log(desc)
    }
}

class HttpClient5 {
    public api: any | undefined
    constructor() {}

    getData(@logClass5('引數裝飾器引數裝飾器') uuid: any) {
        console.log(uuid)
    }
}
let http5: any = new HttpClient5()
http5.getData(1232123)

// 裝飾器執行順序
// 屬性>方法引數>方法>>類
// 存在多個同樣裝飾器則是從下到上執行
function logClass6(params: string) {
    return function (target: any, methodsName: any, desc: any) {
        console.log(params)
    }
}
function logClass7(params: string) {
    return function (target: any, methodsName: any, desc: any) {
        console.log(params)
    }
}
function logClass8(params: string) {
    return function (target: any, methodsName: any, desc: any) {
        console.log(params)
    }
}
function logClass9(params: string) {
    return function (target: any, methodsName: any, desc: any) {
        console.log(params)
    }
}

function logClass10(params: string) {
    return function (target: any) {
        console.log(params)
    }
}

function logClass11(params: string) {
    return function (target: any, attr: any) {
        console.log(params)
    }
}

@logClass10('類裝飾器裝飾器')
class HttpClient6 {
    @logClass11('屬性裝飾器')
    public api: any | undefined
    constructor() {}
    @logClass8('方法裝飾器裝飾器1')
    @logClass9('方法裝飾器裝飾器2')
    getData(
        @logClass6('引數裝飾器1') uuid1: any,
        @logClass7('引數裝飾器2') uuid2: any
    ) {
        console.log(uuid1)
        console.log(uuid2)
    }
}
let http6: any = new HttpClient6()
http6.getData(1232123, 234)