• [Typescript] Build Method decorators in Typescript


    To using decorate, we can modifiy tsconfig.json:

    {
      "compilerOptions": {
        ...
        "experimentalDecorators": true,
        ...  
      }
    }

    So for example we want to build a '@LogMethod' decorator, which arroding to the system logging level to decide whether should log the action.

    enum LoggingLevel {
        INFO,
        WARNING,
        DEBUG,
        TRACE
    }
    const loggingLevel = LoggingLevel.DEBUG;
    
    class Database {
        name = 'ABC';
    
        @LogMethod(LoggingLevel.DEBUG)
        saveData(data: any) {
            console.log(`save user ${data.name} to the database ${this.name}`);
        }
    }
    
    const db = new Database();
    db.saveData({name: 'zhentian'});

    So for example, current is 'DEBUG' for the system, so when log level set to the 'DEBUG' or 'TRACE', action will be logged, 'INFO', 'WARNING' will be not.

    Decorator:

    which is simplya function return a meta function:

    function LogMethod(level: LoggingLevel):Function {
        return (target: any, propertyKey: string,
                descriptor: PropertyDescriptor) => {
        }
    
    }

    If we log out each params:

    'descriptor' is something we are looking for, 'descriptor.value' holding the function which is 'saveData' function, we can put into a variable:

    const originalFunction:Function = descriptor.value;

    Then we can create a new function to wrap this 'originalFunction' in order to provide some additional functionality:

            descriptor.value = function(...args:any[]) {
                if (level <= loggingLevel) {
                    console.log(">> " + propertyKey + " " +  JSON.stringify(args));
                }
    
                originalFunction.apply(this,args);
            };

    Full code:

    enum LoggingLevel {
        INFO,
        WARNING,
        DEBUG,
        TRACE
    }
    const loggingLevel = LoggingLevel.DEBUG;
    
    function LogMethod(level: LoggingLevel):Function {
        return (target: any, propertyKey: string,
                descriptor: PropertyDescriptor) => {
    
            const originalFunction:Function = descriptor.value;
    
            descriptor.value = function(...args:any[]) {
                if (level <= loggingLevel) {
                    console.log(">> " + propertyKey + " " +  JSON.stringify(args));
                }
    
                originalFunction.apply(this,args);
            };
    
    
        }
    
    }
    
    class Database {
        name = 'ABC';
    
        @LogMethod(LoggingLevel.DEBUG)
        saveData(data: any) {
            console.log(`save user ${data.name} to the database ${this.name}`);
        }
    }
    
    const db = new Database();
    db.saveData({name: 'zhentian'});
  • 相关阅读:
    Megcup 2017 决赛第一题 规则
    折正方体-------------给你出道题
    论公平
    Vue 将一个组件嵌入到另一个组件中
    Vue下的index.html
    Vue下的package.json
    Vue 一些用法
    chkconfig 系统服务管理
    Windows和Linux下的 telnet命令 不是内部或外部命令的解决方案
    JSONPlaceholder
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8403077.html
Copyright © 2020-2023  润新知