TypeScript中的装饰器用法

一、装饰器

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上，可以修改类的行为。 
通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。 
常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器 
装饰器的写法：普通装饰器（无法传参） 、 装饰器工厂（可传参）

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

二、类装饰器：

类装饰器在类声明之前被声明（紧靠着类声明）。

类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。 传入一个参数

1、 类装饰器:普通装饰器（无法传参）

function logClass(params: any) {

    console.log(params);
    // params 就是当前类
    params.prototype.apiUrl = '动态扩展的属性';
    params.prototype.run = function () {
        console.log('我是一个run方法');
    }

}

@logClass
class HttpClient {
    constructor() {
    }
    getData() {

    }
}
var http: any = new HttpClient();
console.log(http.apiUrl);
http.run();

2、 类装饰器:装饰器工厂（可传参）

function logClass(params: string) {
    return function (target: any) {
        console.log(target);
        console.log(params);
        target.prototype.apiUrl = params;
    }
}

@logClass('http://www.itying.com/api')
class HttpClient {
    constructor() {
    }

    getData() {

    }
}

var http: any = new HttpClient();
console.log(http.apiUrl);

下面是一个用类装饰器重载构造函数的例子。

类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。

如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明。

function logClass(target: any) {
    console.log(target);
    return class extends target {
        apiUrl: any = '我是修改后的数据';
        getData() {
            this.apiUrl = this.apiUrl + '----';
            console.log(this.apiUrl);
        }
    }
}

@logClass
class HttpClient {
    public apiUrl: string | undefined;
    constructor() {
        this.apiUrl = '我是构造函数里面的apiUrl';
    }
    getData() {
        console.log(this.apiUrl);
    }
}

var http = new HttpClient();
http.getData();

三、属性装饰器

属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数： 
1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。 
2、成员的名字。

//类装饰器
function logClass(params: string) {
    return function (target: any) {
        // console.log(target);
        // console.log(params);       

    }
}

//属性装饰器
function logProperty(params: any) {
    return function (target: any, attr: any) {
        console.log(target);
        console.log(attr);
        target[attr] = params;
    }
}
@logClass('xxxx')
class HttpClient {
    @logProperty('http://itying.com')
    public url: any | undefined;
    constructor() {
    }
    getData() {
        console.log(this.url);
    }
}
var http = new HttpClient();
http.getData();

四、方法装饰器

它会被应用到方法的 属性描述符上，可以用来监视，修改或者替换方法定义。

方法装饰会在运行时传入下列3个参数： 
1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。 
2、成员的名字。 
3、成员的属性描述符。

五、方法参数装饰器

参数装饰器表达式会在运行时当作函数被调用，传入下列3个参数：

1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。 
2、参数的名字。 
3、参数在函数参数列表中的索引。

到此这篇关于TypeScript装饰器的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS装饰者模式和TypeScript装饰器

    JS装饰者模式和TypeScript装饰器

    装饰者模式介绍 装饰者模式(Decorator Pattern)也称为装饰器模式,在不改变对象自身的基础上,动态增加额外的职责.属于结构型模式的一种. 使用装饰者模式的优点:把对象核心职责和要装饰的功能分开了.非侵入式的行为修改. 举个例子来说,原本长相一般的女孩,借助美颜功能,也能拍出逆天的颜值.只要善于运用辅助的装饰功能,开启瘦脸,增大眼睛,来点磨皮后,咔嚓一拍,惊艳无比. 经过这一系列叠加的装饰,你还是你,长相不增不减,却能在镜头前增加了多重美.如果你愿意,还可以尝试不同的装饰风格,只要装

  • TypeScript 装饰器定义

    目录 1.概念 1.1定义 1.2装饰器工厂 1.3装饰器组合使用 1.4装饰器求值 2.类装饰器 3.方法装饰器 4.访问器装饰器 5.属性装饰器 6.参数装饰器 前言: 装饰器Decorator 在ECMAScript中已经提案,但是目前还没有定案:在TypeScript中已经将其实现,但是这仍是一项正在试验中的特性,如果想要使用装饰器,需要在tsconfig.json中将experimentalDecorators属性,将其设置为true. 1.概念 1.1定义 装饰器是一种新的声明,它可

  • vue中typescript装饰器的使用方法超实用教程

    VueConf ,尤大说, Vue 支持 Ts 了,网上关于 Vue + Ts 的资料有点少, 楼主踩了一个星期坑,终于摸明白了 修饰器 的玩法,下面我们就来玩下 Vue 的 decorator 吧 1,data 值的声明 在这里 public 声明的是公有属性, private 声明的是私有属性,私有属性要带 下划线 蓝色框里的内容是声明组件,在每个组件创建时都要带上, Components 中的写法如下 上面是 普通写法 ,下面是 懒加载写法 2.@Prop 父组件传值给子组件 父组件使用

  • VUE中使用TypeScript装饰器实现表单验证的全过程

    VUE中使用TypeScript装饰器实现表单验证的全过程

    目录 前言 装饰器 class-validator 封装Validator 具体使用 小结 前言 最近接触了关于很多TypeScript装饰器的知识,以及class-validator这个用装饰器来做表单验证的包,就萌生了想在vue中使用装饰器来做表单验证的想法.class-validator允许我们在类上通过使用装饰器来完成表单的验证,并且可在浏览器端和node端同时使用.那么接下来先简单介绍一下装饰器和class-validator的用法. 装饰器 装饰器的语法十分简单,只需要在想使用的装饰

  • Vue框架TypeScript装饰器使用指南小结

    前言 装饰器是一种特殊类型的声明,它能够被附加到 类声明,方法, 访问符,属性或参数 上. 装饰器使用 @expression这种形式, expression求值 后必须为一个函数,它会在 运行时被调用 ,被装饰的声明信息做为参数传入. 本篇先从项目的宏观角度来总结一下Decorator如何组织. 目录 主要的Decorator依赖 vue-class-component vuex-class vue-property-decorator core-decorators 自定义Decorator

  • TypeScript中的装饰器用法

    一.装饰器 装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,属性或参数上,可以修改类的行为. 通俗的讲装饰器就是一个方法,可以注入到类.方法.属性参数上来扩展类.属性.方法.参数的功能. 常见的装饰器有:类装饰器.属性装饰器.方法装饰器.参数装饰器 装饰器的写法:普通装饰器(无法传参) . 装饰器工厂(可传参) 装饰器是过去几年中js最大的成就之一,已是Es7的标准特性之一 二.类装饰器: 类装饰器在类声明之前被声明(紧靠着类声明). 类装饰器应用于类构造函数,可以用来监视,修改或替换类

  • Python中的装饰器用法详解

    本文实例讲述了Python中的装饰器用法.分享给大家供大家参考.具体分析如下: 这里还是先由stackoverflow上面的一个问题引起吧,如果使用如下的代码: 复制代码 代码如下: @makebold @makeitalic def say():    return "Hello" 打印出如下的输出: <b><i>Hello<i></b> 你会怎么做?最后给出的答案是: 复制代码 代码如下: def makebold(fn):    

  • python中property和setter装饰器用法

    作用:调用方法改为调用对象, 比如 : p.set_name() 改为 p.set_name 区别:前者改变get方法,后者改变set方法 效果图: 代码: class Person: def __init__(self,name): self._name = name def get_name(self): return self._name def set_name(self,name): self._name = name p = Person('小黑') print(p.get_name

  • 实例讲解Python编程中@property装饰器的用法

    取值和赋值 class Actress(): def __init__(self): self.name = 'TianXin' self.age = 5 类Actress中有两个成员变量name和age.在外部对类的成员变量的操作,主要包括取值和赋值.简单的取值操作是x=object.var,简单的赋值操作是object.var=value. >>> actress = Actress() >>> actress.name #取值操作 'TianXin' >&g

  • Python 中@lazyprop 装饰器的用法

    安装 pip install lazyprop 例子1 from lazyprop import lazyprop class Foo(object): def __init__(self): self.load_count = 0 @lazyprop def lazy(self): self.load_count += 1 f = Foo() f.lazy f.lazy f.lazy print(f.load_count) 输出: 1 例子2 from lazyprop import lazy

  • python函数装饰器用法实例详解

    本文实例讲述了python函数装饰器用法.分享给大家供大家参考.具体如下: 装饰器经常被用于有切面需求的场景,较为经典的有插入日志.性能测试.事务处理等.装饰器是解决这类问题的绝佳设计, 有了装饰器,我们就可以抽离出大量函数中与函数功能本身无关的雷同代码并继续重用.概括的讲,装饰器的作用就是为已经存在的对象添加额外的功能. #! coding=utf-8 import time def timeit(func): def wrapper(a): start = time.clock() func

  • 详解Python中的装饰器、闭包和functools的教程

    装饰器(Decorators) 装饰器是这样一种设计模式:如果一个类希望添加其他类的一些功能,而不希望通过继承或是直接修改源代码实现,那么可以使用装饰器模式.简单来说Python中的装饰器就是指某些函数或其他可调用对象,以函数或类作为可选输入参数,然后返回函数或类的形式.通过这个在Python2.6版本中被新加入的特性可以用来实现装饰器设计模式. 顺便提一句,在继续阅读之前,如果你对Python中的闭包(Closure)概念不清楚,请查看本文结尾后的附录,如果没有闭包的相关概念,很难恰当的理解P

  • Python多层装饰器用法实例分析

    本文实例讲述了Python多层装饰器用法.分享给大家供大家参考,具体如下: 前言 Python 的装饰器能够在不破坏函数原本结构的基础上,对函数的功能进行补充.当我们需要对一个函数补充不同的功能,可能需要用到多层的装饰器.在我的使用过程中,遇到了两种装饰器层叠的情况,这里把这两种情况写下来,作为踩坑记录. 情况1 def A(funC): def decorated_C(funE): def decorated_E_by_CA(*args, **kwargs): out = funC(funE)

  • Python装饰器用法示例小结

    本文实例讲述了Python装饰器用法.分享给大家供大家参考,具体如下: 下面的程序示例了python装饰器的使用: 示例一: def outer(fun): print fun def wrapper(arg): result=fun(arg) print 'over!' return result return wrapper @outer def func1(arg): print 'func1',arg return 'very good!' response=func1('python'

  • 快速了解Python中的装饰器

    需要理解的一些概念 要理解Python中的装饰器,我觉得还是应该从最基本的概念开始: 装饰器模式:所谓的装饰器模式,可以简单地理解为"在不改变原有内部实现的情况下,为函数或者类添加某种特性".这样我们就可以将一些与业务无关.具有通用性的代码抽象出来,作为装饰器附加到需要这些代码的函数或者类之上.用面向切面编程的思想解释就是"装饰器应该是一个切面". 函数是一等公民:意思就是函数可以被当成普通变量一样使用.在Python中,可以把函数赋值给变量,可以将函数作为其它函数

随机推荐