首页 前端知识 Typescript:类的装饰器

Typescript:类的装饰器

2024-09-18 01:09:00 前端知识 前端哥 30 964 我要收藏

Typescript的装饰器我在学习typescript的时候并不是很清楚它的作用场景,直到使用了nest.js框架后,才明白其作用,于是又深入学习了一下,希望通过对装饰器的学习提高对nest.js的使用。

装饰器

装饰器为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式

装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。

装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入

function setProp(){
  return function target(){
    
  }
}
@setProp()

装饰器求值

类中的装饰器的引用,参数装饰器、方法装饰器、访问符装饰器或者属性装饰器,应用到实例成员上

参数装饰器、方法装饰器、访问符装饰器、属性装饰器,应用到静态成员上

参数装饰器应用到构造函数上

类装饰器 应用到类上

类装饰器

类装饰器在类声明前声明,类修饰符应用于类的构造函数,可用于观察、修改或替换类定义。

类装饰器接收装饰类的构造函数作为唯一参数

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

function setName(name: string) {
    return (target: new () => any) => {
      sign = target;
    }
  }
  @setName('lison')
  class ClassDes {
    constructor() {

    }
  }

方法装饰器

方法修饰符在方法声明之前声明。修饰符应用于方法的属性描述符,可用于观察、修改或替换方法定义。

方法装饰器接收三个参数:

  1. 静态成员的类的构造函数或实例成员的类的原型
  2. 成员名称
  3. 成员的属性描述符

如果方法装饰器返回一个值,它将用作该方法的属性描述符。

function methodDecorator(target, propertyName,propertyDescriptor){
	
}
class Person {
	name:string;
	constructor(name:string){
		this.name = name;
	}
	@methodDecorator
	getName(){
		return this.name;
	}
}

访问者装饰器

在访问器声明之前声明。访问器修饰符应用于访问器的属性描述符,可用于观察、修改或替换访问器的定义。

访问者装饰器接收三个参数:

  1. 静态成员的类的构造函数或实例成员的类的原型
  2. 成员的名称
  3. 成员的属性描述符

如果访问者装饰器返回一个值,它将用作成员得属性描述符

function getterDecorator(target, propertyName,propertyDescriptor){
	
}
class Person {
	constructor(name:string){
		this.name = name;
	}
	@getterDecorator
	get name(){
		return this.name;
	}
}

属性装饰器

在属性声明之前声明。
属性装饰器接收两个参数:

  1. 静态成员的类的构造函数或实例成员的类原型。
  2. 成员的名称

属性装饰器的返回值会被忽略。

function getterDecorator(target, propertyName,){
	
}
class Person {
	@propertyDecorator
	name:string
	constructor(name:string){
		this.name = name;
	}
}

参数装饰器

在参数声明之前声明了参数装饰器。参数修饰符应用于类构造函数或方法声明的函数。

参数装饰器接收三个参数:

  1. 静态成员的类的构造函数或实例成员的类原型
  2. 成员的名称
  3. 函数参数列表中参数的序号索引

参数装饰器的返回值会被忽略。

function paramsDecorator(target, propertyName,index){
	
}
class Person {
	name:string
	constructor(name:string){
		this.name = name;
	}
	eat(@paramsDecorator food:string){
	
	}
}

装饰器的执行顺序

  1. 执行参数装饰器
  2. 执行方法和属性装饰器
  3. 执行类装饰器
    总的规律从内向外执行,先执行里面的装饰器,依次向外执行。
转载请注明出处或者链接地址:https://www.qianduange.cn//article/18365.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!