装饰器: 装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,属性或者参数上,可以修改类的行为。
通俗来讲: 装饰器就是一个方法,可以注入到类,方法,属性参数上来扩展类,属性,方法,参数的功能。
常见的装饰器有: 类装饰器,属性装饰器,方法装饰器,参数装饰器
装饰器的写法: 普通装饰器(无法传参) 装饰器工厂(可传参)
类装饰器
类装饰器: 类装饰器在类声明之前被声明(紧靠着声明) 类装饰器应用于类构造函数,可以用来监视,修改或替换类定义,并传入一个参数
装饰器的执行顺序
属性>方法>方法参数>类 如果有多个同样的装饰器,它会优先执行后面的(从里到外的执行顺序)
1. 类装饰器
a. 普通装饰器(无法传参)
function logClass(params:any) { //params就是当前类 console.log(params)// [Function: HttpClient] 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();//我是一个run方法
b.装饰器工厂(可传参)
function logClass(params:string) { return function(target:any){ console.log(target);//把类 传参给 target.prototype.apiUrl=params; } } //调用装饰器用@ @logClass('www.baidu.com') class HttpClient{ constructor() {} getData(){} } var http:any=new HttpClient(); console.log(http.apiUrl);
c. 类装饰器 重载构造函数的例子
/* 类构造器表达式会在运行时当做函数被调用,类的沟站函数作为其唯一的参数。 如果类装饰器返回一个值,它会使用提供的构造函数来替换类的声明。 * */ 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. 属性装饰器
/* 属性装饰器表达式会在运行时,当做函数被调用,传入下列两个参数 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象 成员的名字 **/ function logProperty(params:any){ return function(target:any,attr:any){ console.log(target) //HttpClient { getData: [Function] } console.log(attr) //apiUrl target[attr]=params; } } @logClass('xxxxx') class HttpClient{ @logProperty('xxxsssss') public apiUrl:string | undefined; constructor() {} getData(){ console.log(this.apiUrl)//xxxsssss } } var http=new HttpClient(); http.getData();//我是修改后的数据----
3. 方法装饰器
/* 方法装饰器 它会接应应用到方法的属性的描述符上,可以用来监视,修改或者替换方法的定义 方法的装饰会在运行时传入下列3个参数 1.对于静态成员来说是类的构造函数,对于实例成员是类的原型对象 2.成员的名字 3.成员的属性描述符 */ function logMethod(params:any){ return function (target:any,methodName:any,desc:any) { console.log(target); //HttpClient { getData: [Function] } console.log(methodName); //getData console.log(desc); // { value: [Function],writable: true, enumerable: true,configurable: true } target.apiUrl='mssmmsmsm'; target.run=function () { console.log('run') } } } class HttpClient{ public url:any | undefined; constructor() {} @logMethod('xxxx') getData(){ console.log(this.url); } } var http:any=new HttpClient(); console.log(http.apiUrl); http.run(); //方法装饰器 修改getData方法 function logMethod(params: any) { console.log(params) return function (target: any, methodName: any, desc: any) { console.log(target); //HttpClient { getData: [Function] } console.log(methodName); //getData console.log(desc.value); //方法定义 //修改装饰器的方法,把装饰器方法里面传入的所有参赛改为string类型 //保存当前的方法 var oMethods=desc.value; //替换 desc.value=function (...args:any[]) { args=args.map((value)=>{ return String(value) }) console.log(args); //修改方法 对象冒充 oMethods.apply(this,args); } } } class HttpClient { public url: any | undefined; constructor() {} @logMethod('xxxx') getData(...args:any[]) { console.log(args) console.log('我是getData中的方法'); } } var http: any = new HttpClient(); http.getData('123','xxx');//[ '123', 'xxx' ]
4. 参数装饰器
/* 方法参数装饰器 参数装饰器表达式会在运行时当做函数直接调用,可以使用参数装饰器为类的原型增加一些元素数据,传入下列3个参数 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。 参数的名字 参数在函数参数列表的索引。 **/ function logParams(params:any) { return function (target: any, methodName: any, paramsIndex: any) { console.log(params) console.log(target); console.log(methodName); console.log(paramsIndex); target.apiUrl=params; } } class HttpClient { public url: any | undefined; constructor() {} getData(@logParams('uuiddddddddd') uuid: any) { console.log('我是getData里面的方法') console.log(uuid+'----'); } } //实例化 var http:any = new HttpClient(); http.getData(11111) console.log(http.apiUrl);
相关推荐
尽管在编写本文时它不会对未知类发出警告,但该扩展程序提供的所有其他功能(悬停信息,颜色装饰器,更快的速度)都不能弥补它,因此,我强烈建议您使用它代替它。 有关如何使用twin.macro进行配置的详细信息,。 ...
以通俗易懂的方式讲解?TypeScript?语法,帮您快速入门,将TypeScript应用到项目中!...10.TypeScript语法之装饰器 教学全程采用笔记+代码案例的形式讲解,每个知识点都有详细的讲解,通俗易懂!!! 讲师介绍
因此他重写了这一章,于是装饰器现在就有新语法和旧语法两章,因为 TypeScript 同时支持这两者。 内容 简介 基本用法 any 类型 类型系统 数组 元组 symbol 类型 函数 对象 interface 类 泛型 Enum 类型 类型断言 ...
余烬并发装饰器 这个Ember插件使您可以使用声明/配置任务。安装 :warning: :backhand_index_pointing_right: 如果有任何或不确定要怎么做,请查看 。第一阶段的装饰要求: 至少ember-cli-babel@^7.7.2 至少@babel/...
es-decorate填补了语法空白,提供了一个辅助函数,可以应用符合提议的装饰器 API 的装饰器。 安装 npm install --save es-decorate 用法 遵循的示例: decorate = require ' es-decorate ' # Class decorator ...
用法Vuex模块可以使用装饰器作为一个类来编写:// user-module.ts import“ Vuex-class-modules”中的{VuexModule,Module,Mutation,Action}; @Module类UserModule扩展了VuexModule {// state firstName =
一个为Aurelia应用程序提供增强的@bindable和@observable装饰器的插件 为装饰器@observable和@bindable提供强制支持 提供使用流利的语法创建自定义@observable功能: @observable.custom / @observable.custom() ...
Dynamorm是适用于的本机Typescript ORM 从零开始用Typescript编写,完全支持通过模板/装饰器语法键入这是硬叉,出于主动维护的原因 安装 npm install @serverless-seoul/dynamorm 看起来如何? import { Config ...
通过使用装饰器,可以允许您创建常规的Typescript属性,并将其注释为字段以获得更好的体验,从而在项目中提供更好的类型安全性。 Visual Studio Code中的Intellisense只能与注释一起使用,而在没有样板的香草插件中...
用 ES5/ES6/TS 编写的 ...ES5 示例中,我使用 browserify 要求 angular2 作为节点模块在 ES6 示例中,我使用 babel 来启用 ES7 装饰器语法的使用在 TS 示例中, --emitDecoratorMetadata同样的原因,我们使用--emitDe
thinkorm@4.0使用Typescript的装饰器! 一个适用于Node.js的灵活,轻便且功能强大的对象关系映射器。 ThinkORM是一个可扩展轻量级的功能丰富的ORM,在Node.js环境中运行,已经支持Typescript。 ThinkORM尝试使用...
设计模式:什么是设计模式,设计模式的类别,单例模式,观察者模式,装饰器模式。 课程项目 创建插件以扩展视频播放器的功能,了解DOM的工作原理。 创建可为视频播放器提供更多功能的插件。 根据项目的需要在对象中...
支持ASTConvertPlugins中的自定义装饰器,例如@Subscription 。 有关更多详细信息,请参见 。技术支持要转换的文件必须符合以下条件: 脚本必须使用Typescript编写。 (将来可能会支持JavaScript。) 所有语法必须...
为了获得更多的类型安全性和更少的语法,建议与一起使用, 是用于装饰器元数据的ES7 Reflection API的原型。通过无缝集成到现有代码中,超轻量级语法安全地将标准JSON解析为类实例,而无需在源JSON中指定任何类型...
tsconfig.json的editorOptions中需添加experimentalDecorators = true以打开装饰器特性除了对小程序基础的ts声明的完善之外,还对网络请求,本地存储,Socket等常用功能提供了纯typescript的封装,简单易用,安装...
为了获得更多的类型安全性和更少的语法,建议与一起使用, 是用于装饰器元数据的ES7 Reflection API的原型。 通过无缝集成到现有代码中,超轻量级语法 安全地将标准JSON解析为类实例,而无需在源JSON中指定任何...
它提供了一些功能和装饰器来帮助您实现该目标。 通常,它是Vue的服务容器,使您的项目类似于Angular。 功能通过使用类似于Angular的语法来构建OOP Vue应用程序。 纯粹的TypeScript体验。 Vue的服务容器。 将依赖项...
色彩装饰器 通过API进行配置。 有关CSS插件提供的用于配置CSS / LESS / SCSS语言支持的API,请参见。 CSS插件在内部使用节点模块,提供上述功能的实现。 也使用同一模块来增强CSS,LESS和SCSS编辑体验。 问题 请在...
带有装饰器和async / await支持的准系统Aurelia + webpack2构建 该样板是截至2017年4月13日的最新内容,并包含以下内容: 基于ES6的Aurelia实现(而不是Typescript) 通过路由进行代码拆分(使用Aurelia路由器中的...
生态系统项目状态描述 单页应用程序路由 大型状态管理 工程脚手架 *.vue单个文件组件( *.vue文件)加载器 服务器端渲染支持 基于类的API的TypeScript装饰器 RxJS集成 浏览器DevTools扩展Vue的文档要查看和文档,请...