TypeScript学习笔记04-@装饰器

装饰器 Decorator

1. 类装饰器 ClassDecorator

/* 基本语法 */
// target 是返回的类的构造函数
const Base:ClassDecorator = (target)=>{
    target.prototype.name="新增属性"
}

// 使用@符号
// 原理其实类似函数 Base(Http)
@Base()
class Http(){

}

2. 装饰器工程（函数柯里化）

// 柯里化接受数据参数
const Base= (params:string)=>{
    const fn:ClassDecorator=(target)=>{
        target.prototype.name="新增属性"+params
    }
    return fn
}
// 传参数
@Base("params")
class Http(){

}

// 调用
const ht=new Http()
ht.fn();

3. 方法装饰器 MethodsDecorator

const Get=(url:string)=>{
    /* 
        target : 原型对象
        key: 方法名字
        descriptor: 描述符 

    */
    const fn:MethodsDecorator=(target,key,descriptor:PropertyDescriptor)=>{
        // axios获取数据
        /* 使用描述符.value回传数据 */
        descriptor.value(data)

    }
    return fn
}

class Http(){
    @Get("/api/base")
    getList(data:any){
        // 直接获取值
    }

}

4. 参数装饰器

const Get=(url:string)=>{
    const fn:MethodsDecorator=(target,key:any,descriptor:PropertyDescriptor)=>{
        const k=Reflect.getMetadata("key",target)
        descriptor.value(k?resp.data[key]:resp.data)

    }
    return fn
}

const Result = ()=>{
    const fn:ParameterDecorator=(target,key,index)=>{
        // Reflect 入门
        // https://es6.ruanyifeng.com/#docs/reflect
        Reflect.defineMetaData("key","result",target)
    }
    return fn
}

class Http(){
    @Get("/api/base")
    getList( @Result() data:any){
        // 不加装饰器
        // console.log(data.result.list)
        // 直接获取值
        console.log(data.list)

    }

}

5. 属性装饰器

// 定义属性装饰器
const Desc:PropertyDescorator=(target,key)=>{
    console.log(target,key)
}


class Http(){
    // 属性装饰器
    @Desc()
    desc:string
}