typescript的装饰器(Decorotor)基本使用

最新推荐文章于 2025-05-19 16:27:58 发布

原创最新推荐文章于 2025-05-19 16:27:58 发布 · 621 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript

typeScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在TypeScript中使用类装饰器模拟接口请求、处理错误，以及通过装饰器工厂传递参数。实例展示了@RequestDecorotor和@errDecorotor的使用，并探讨了装饰器的执行顺序和传递参数的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

typescript类的装饰器
1.类的装饰器本身是一个函数
2.装饰器在修饰的类执行完之后执行
3.类的装饰器接收第一参数是一个构造函数
4.多个装饰器执行顺序,先上到下或者从左到右,修饰执行顺序是从下到上或者从右到左

tsconfig.json里面开启装饰器：
"experimentalDecorators": true, 
"emitDecoratorMetadata": true,

/*
装饰器实现模拟接口请求
*/

const RequestDecorotor = (url: string): MethodDecorator => {
    return (...args:any[]) => {
        const [, , descriptor] = args;
        const methods = descriptor.value;
        descriptor.value = () => {
            new Promise((resolve) => {
                setTimeout(() => {
                    resolve({ name: '老王', age: 28,url });
                },200)
            }).then(res => {
                methods(res)
            })
        }
    }
}

class MockRequest {
    @RequestDecorotor('https://xxx.com')
    public resultData(res:any={}) {
        console.log("请求结果", res)
        // { name: '老王', age: 28, url: 'https://xxx.com' }
    }
}

new MockRequest().resultData();

/*
装饰器处理错误
*/

const errDecorotor: MethodDecorator = (...args:any[]) => {
    const [, , descriptor] = args;
    const methods = descriptor.value;
    descriptor.value = () => {
        try {
            methods();
        } catch (error) {
            //自定义样式和报错处理
            console.log(`%c${error}`, `color:  red;cont-size:50px`);
        }
    }
}

class ErrorDeal {
    @errDecorotor
    public find() {
        throw new Error('您查找的文件不存在')
    }
    @errDecorotor
    public login() {
        throw new Error('您的登录权限不足')
    }
}

const err = new ErrorDeal();
err.find();
err.login();

/*
装饰器工厂在ts的使用
可以给装饰器传递参数，例如
*/

const tankDecorotor = (type:string):ClassDecorator => {
    console.log(type)
    if (type === 'Tank3') {
        return (target: Function) => {
            target.prototype.moveTank = () => {
                console.log('moveTank')
            }
        }
    }

    //player3
    return (target:Function) => {
        target.prototype.playerSing = () => {
            console.log('playerSing')
        }
    }
}

@tankDecorotor('Tank3')
class Tank3 {

}

@tankDecorotor('player3')
class Player3{

}

//调用
const t3 = new Tank3();
(<any>t3).moveTank();

const player3 = new Player3();
(<any>player3).playerSing();

/*  
打印
Tank3
player3
moveTank
playerSing
*/