Although TS Let us become more code, but the effect on the subsequent maintenance of the really impressive
TS is decorated as a more important part, then look at the code in the end how to use
Decorative use in class
function desc(target:any){ //装饰器
console.log(target) //这里打印出的target为 [Function: Animals]
--------------------------------------------------------------------------------------------------
**在类上扩展属性或方法**、第一种是返回一个类、这个类要覆盖之前的类
return class extends target{
constructor(name:string){
super(name)
}
sayHi(){} //之前类里面的属性、方法需要再实现一遍
selfsd(){
console.log(this.name)
}
color: string = 'red'
}
}
--------------------------------------------------------------------------------------
第二种：直接挂载到原型上
function desc(target: any){
console.log(target)
target.prototype.color = 'red' //直接挂载到原型上、避免重复实现之前类的属性和方法、使用的时候直接打印实例.color即可
}
----------------------------------------------------------------------------------------------------------------
@desc
class Animals {
constructor(public name:string){
this.name = name
}
sayHi(){
return `My name is ${this.name}`
}
}
let Tom = new Animals('Tom')
console.log(Tom.color) //
Tom.selfsd() //这里扩展的属性就能使用
Decorative uses functions in the class
function desc(params: string): any{
console.log('这是装饰器传来的参数：'+params)
return function(target: any,key: string,desciptor: {[propnames:string]: any}){ //这三个参数只有前两个是必须添加的
console.log(target) //这是类的原型、可以直接在上面添加属性方法
console.log(key) //这是装饰器装饰的类中的方法名
console.log(desciptor) //这是方法的描述对象 其中的value可以重写覆盖之前方法、如果想使用之前的方法、我们也可以使用、这里不做描述
target.name = "胡歌"
}
}
class fullname {
fullname: string
constructor(public firstname:string ,public lastname: string){
}
@desc('这是传向装饰器工厂函数的参数')
fullnames(){
this.fullname = this.firstname + this.lastname
}
}
let person: any = new fullname('hu','ge')
console.log(person.name)
Decorative uses the class attribute in the
function desc(target:any,name:string){
console.log(target) 这里依旧是类的原型
console.log(name) 这里是类的属性的name
}
class Alls {
@desc
name: string
constructor(){
}
say(world: string){
return `I say ${world}`
}
}
let world = new Alls()
Decorators parameters used on
function desc(target:any,key:string,index:number){
console.log(target) target不多说、依旧原型
console.log(key) 注意*这里的key是修饰参数的函数名、即say*
console.log(index) 这里打印出0、相当于第一个参数。如果有第二个参数、这三个会打印两次、首先打印出来的是第二个参数对应的
}
class Alls {
constructor(){
}
say(@desc world: string){
return `I say ${world}`
}
}
let world = new Alls()
world.say('hello')
These are the applications decorator in class, we can be commenced some adjustments, according to their specific business needs
Although TS will make you write code more than quantitative, but it facilitates the post-maintenance
In this regard the front
I was far from proficient, but has been on the road
