TypeScript 装饰器

程序猿的栖息地

发布于 2024-02-17 15:43:51

1090

发布于 2024-02-17 15:43:51

文章被收录于专栏：程序猿的栖息地

什么是装饰器

装饰器：就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。

常见的装饰器

类装饰器、属性装饰器、方法装饰器、参数装饰器

装饰器的写法

普通装饰器（无法传参）、装饰器工厂（可传参）

装饰器是过去几年中js最大的成就之一，已是Es7的标准特性之一

开启装饰器支持

创建 tsconfig

tsc --init

2. 修改配置文件开启装饰器支持，添加 :

"experimentalDecorators": true

类装饰器（无法参数）

类装饰器在类声明之前被声明（紧靠着类声明）。类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。

function decoratorForPerson( target:any ){
    target.prototype.userName = '张三..';
    // 静态属性
    target.age = 18;
}

@decoratorForPerson
class Person{
    userName: any;
    static age: Number;
}

let pserson = new Person();
console.log( pserson.userName );

console.log( Person.age );

装饰器工厂（可传参）

function decoratorForPerson( options:any ){
    return function( target:any ){
        target.prototype.userName = options.userName;
        target.prototype.age = options.age;
    }
}

@decoratorForPerson({
    userName: '张三',
    age:19
})
class Person{
    userName: any;
    age: any;
}

let pserson = new Person();
console.log( pserson.userName );
console.log( pserson.age );

装饰器组合

function demo1( target:any ){
    console.log('demo1')
}
function demo2(  ){
    console.log('demo2')
    return ( target:any )=>{
        console.log('demo2里面')
    }
}
function demo3( ){
    console.log('demo3')
    return ( target:any )=>{
        console.log('demo3里面')
    }
}
function demo4( target:any ){
    console.log('demo4')
}

@demo1
@demo2()
@demo3()
@demo4
class Person{
}

/*结果是：
demo2
demo3
demo4
demo3里面
demo2里面
demo1
*/

属性装饰器

function fun3( arg:any ){
    return ( target:any , attr:any )=>{
        target[attr] = arg;
    }
}

class Obj3{
    @fun3('张三')
    //@ts-ignore
    userName:string
}   
let obj3 = new Obj3();
console.log( obj3.userName );

六、方法装饰器

function test( target: any, propertyKey: string, descriptor: PropertyDescriptor ) {
    console.log( target );
    console.log( propertyKey );
    console.log( descriptor );
}

class Person {
    @test
    sayName() {
        console.log( 'say name...' )
       return 'say name...';
    }
}

let p = new Person();
p.sayName()

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-02-01，如有侵权请联系 cloudcommunity@tencent.com 删除

target