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'});

[Typescript] Build Method decorators in Typescript的更多相关文章

  1. [TypeScript] Stopping a TypeScript Build When Errors Are Found

    TypeScript will always compile even if there are ridiculous errors in your project. This lesson show ...

  2. [Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

    Vue 2.2 introduced a simple dependency injection system, allowing you to use provide and inject in y ...

  3. 深入浅出TypeScript(2)- 用TypeScript创建web项目

    前言 在第一篇中,我们简单介绍了TypeScript的一些简单语法,那么如果我们只是简单使用TypeScript开发一个web项目,应该做哪些准备?接下来我们就结合TypeScript和Webpack ...

  4. [Typescript] Introduction to Generics in Typescript

    If Typescript is the first language in which you've encountered generics, the concept can be quite d ...

  5. 学习TypeScript,笔记一:TypeScript的简介与数据类型

    该文章用于督促自己学习TypeScript,作为学笔记进行保存,如果有错误的地方欢迎指正 2019-03-27  16:50:03 一.什么是TypeScript? TypeScript是javasc ...

  6. [TypeScript] Custom data structures in TypeScript with iterators

    We usually think of types as something that can define a single layer of an object: with an interfac ...

  7. [Typescript] Specify Exact Values with TypeScript’s Literal Types

    A literal type is a type that represents exactly one value, e.g. one specific string or number. You ...

  8. [TypeScript] Overload a Function with TypeScript’s Overload Signatures

    Some functions may have different return types depending on the types of the arguments with which th ...

  9. [TypeScript] Represent Non-Primitive Types with TypeScript’s object Type

    ypeScript 2.2 introduced the object, a type that represents any non-primitive type. It can be used t ...

随机推荐

  1. Golang 源码剖析:log 标准库

    Golang 源码剖析:log 标准库 原文地址:Golang 源码剖析:log 标准库 日志 输出 2018/09/28 20:03:08 EDDYCJY Blog... 构成 [日期]<空格 ...

  2. 简单实现双向数据绑定mvvm。

  3. CSS解决ul下面最后一个li的margin

    1.运用css3的nth-child(3n): <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  4. Spring IoC容器实现

    1,Spring的两种IoC容器 BeanFactory 基础类型的IoC容器: 采用延迟初始化策略(容器初始化完成后并不会创建bean的对象,只有当收到初始化请求时才进行初始化): 由于延迟初始化, ...

  5. open函数详解

    转载:https://www.cnblogs.com/frank-yxs/p/5925574.html open函数用来在进程中打开文件,如果成功则返回一个文件描述符fd. ============= ...

  6. Http请求和相应模式(B/S)(1)

    B/S模式 服务器端的接受数据 :浏览器端 表单格式 <form></form> GET:请求方式, /index.html  Web浏览器上的资源路径 uname=bjxt& ...

  7. 利用新版本自带的Zookeeper搭建kafka集群

    安装简要说明新版本的kafka自带有zookeeper,其实自带的zookeeper完全够用,本篇文章以记录使用自带zookeeper搭建kafka集群.1.关于kafka下载kafka下载页面:ht ...

  8. POJ 2154

    这题的时间卡的.... 必须用欧拉来优化,而且要加素数表.最重要是,因为最后结果要/n,而数据很大,所以,必须在之前就先/n了,否则会爆数据. #include <iostream> #i ...

  9. storm-安装

            storm有两种操作模式: 本地模式和远程模式.使用本地模式的时候,你能够在你的本地机器上开发測试你的topology, 一切都在你的本地机器上模拟出来; 用远端模式的时候你提交的to ...

  10. Zorka监控平台的Online reconfiguration基本效果展示

    在上一篇日志中,我简介了Zorka的Online reconfiguration的用法,可是没怎么介绍如何看到在线更改的效果,这里简单说说. 还是以之前的tomcat为例,我们在文件夹zorka\sc ...