TypeScript 类装饰器的一个例子和使用单步调试搞清楚其运行原理

简介: TypeScript 类装饰器的一个例子和使用单步调试搞清楚其运行原理

官方文档


类装饰器的定义如下:


type ClassDecorator = <TFunction extends Function>
  (target: TFunction) => TFunction | void;

接收一个函数,返回一个新的函数。类装饰器本身也是一个函数。


输入参数 target:类的构造器。


返回参数:如果类装饰器返回了一个值,她将会被用来代替原有的类构造器的声明。


因此,类装饰器适合用于继承一个现有类并添加一些属性和方法。

看一个例子:


type Consturctor = { new (...args: any[]): any };
function toString<T extends Consturctor>(BaseClass: T) {
  return class extends BaseClass {
    toString() {
      return JSON.stringify(this);
    }
  };
}
@toString
class C {
  public foo = "foo";
  public num = 24;
}
console.log(new C().toString())
// -> {"foo":"foo","num":24}

运行时调试入口:main.js

image.png



main.js 里加载应用开发的 AppModule,作为 bootstrapModule:


image.png


AppModule 里启动 AppComponent:


image.png


整个 class C 的定义,作为 toString 的输入参数:


image.png


在 Angular library tslib.es6.js里的 __decorate 方法,能看到我们自己定义的装饰器 toString:


image.png

被装饰器修饰的目标类 class C:


image.png

装饰器返回一个新的子类,扩展自基类,并且覆盖了 toString 方法:


image.png




这个 tslib.es6.js, 在本地的 node_modules 文件夹里也能找到:


image.png



相关文章
|
3月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
4月前
|
JavaScript 前端开发 程序员
TypeScript 类
TypeScript 类
|
9天前
|
JavaScript
typeScript进阶(13)_类与注意事项(八项特性)
TypeScript的类支持特性包括:构造函数、继承(使用`extends`)、公有/私有/受保护修饰符、只读修饰符、参数属性、存取器(getters/setters)、抽象类(用`abstract`声明)。类可用作类型。
9 0
typeScript进阶(13)_类与注意事项(八项特性)
|
3月前
|
JavaScript 前端开发 索引
TypeScript(八)装饰器
TypeScript(八)装饰器
24 0
|
3月前
|
JavaScript 前端开发
TypeScript(七)类
TypeScript(七)类
31 0
|
4月前
|
JavaScript 前端开发 开发者
10.【TypeScript 教程】类(Class)
10.【TypeScript 教程】类(Class)
29 2
|
4月前
|
JavaScript
TypeScript类
TypeScript类
|
4月前
|
JavaScript Java C#
typescript 类类型
typescript 类类型
|
4月前
|
JavaScript 监控 编译器
29.【TypeScript 教程】装饰器(Decorator)
29.【TypeScript 教程】装饰器(Decorator)
36 0
|
9天前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
26 1
typeScript进阶(9)_type类型别名
下一篇
无影云桌面