Typescript：类的装饰器-Toy模板网

这篇具有很好参考价值的文章主要介绍了Typescript：类的装饰器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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() {

    }
  }

方法装饰器

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

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

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

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

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

访问者装饰器

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

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

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

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

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

属性装饰器

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

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

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

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

参数装饰器

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

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

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

参数装饰器的返回值会被忽略。文章来源地址https://www.toymoban.com/news/detail-603990.html

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