【十月打卡】第61天 TypeScript(17)
2022/10/6 4:23:54
本文主要是介绍【十月打卡】第61天 TypeScript(17),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
类的装饰器
- 类的装饰器在不影响类的前提下对类进行扩展
由于装饰器目前是试验阶段,在ts中使用装饰器之前需要对tsconfig.json进行配置
"experimentalDecorators": true
装饰器
function testDecoration(constructor: any) { console.log('123'); } @testDecoration class Test { constructor() {} }
装饰器本质上是一个函数,当类构造完成后,会执行类上的装饰器函数;
多个装饰器执行顺序
当有多个装饰器时,执行顺序从右到左,从下到上
(书写顺序)
function testDecoration(constructor: any) { console.log('111'); } function testDecoration1(constructor: any) { console.log('222'); } @testDecoration @testDecoration1 class Test { constructor() {} }
如上先执行testDecoration1, 后执行testDecoration
装饰器覆盖类
装饰器属性以及方法会覆盖类中的属性及方法
function testDecoration(constructor: any) { constructor.prototype.getName = () => { console.log('decoration'); }; } @testDecoration class Test { constructor() {} getName() { console.log('test'); } } const test = new Test(); test.getName();
类的工厂模式
装饰器可以根据不同的类返回不同的函数
function testDecoration(flag: boolean) { if (flag) { return function (constructor: any) { constructor.prototype.getName = () => { console.log('decoration'); }; }; } else { return function (constructor: any) {}; } } @testDecoration(true) class Test { constructor() {} } const test = new Test(); (test as any).getName();
使用泛型继承的方式
function testDecoration<T extends new (...args: any[]) => any>(constructor: T) { return class extends constructor { name = 'tz'; getName() { return this.name; } }; } @testDecoration class Test { constructor(public name: string) {} } const test = new Test('hello'); (test as any).getName(); console.log(test, 'test'); // 'name: tz'
解决装饰器的方法用实例调用报错的问题
function testDecorationFactory() { return function testDecoration<T extends new (...args: any[]) => any>(constructor: T) { return class extends constructor { name = 'tz'; getName() { return this.name; } }; } } const Test = testDecorationFactory()(class { constructor(public name: string) {} }) const test = new Test('hello'); test.getName(); // 解决test报错的问题
这篇关于【十月打卡】第61天 TypeScript(17)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升