C/C++教程

【九月打卡】第11天 TypeScript学习 10-13章

本文主要是介绍【九月打卡】第11天 TypeScript学习 10-13章,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

课程名称: 晋级TypeScript高手,成为抢手的前端开发人才

课程章节: 10-13 【方法装饰器】方法装饰器的实现

课程讲师: keviny79

课程内容:
方法装饰器使用:
1.不带参数的"方法装饰器"写法

// 声明没有参数的方法装饰器
function MyMethodDecorator(
  targetClassPrototype: any,
  key: string,
  methodDecri: PropertyDescriptor
) {
  console.log("targetClassPrototype:", targetClassPrototype); //
  console.log("key:", key);
  console.log("methodDecri:", methodDecri);
  methodDecri.value();
}

class RoleService {
  public roleName: string = "管理员";
  constructor() {}
  
  // 直接在方法上使用 @ + 参数器名称
  @MyMethodDecorator
  DistribRoles() {
    // 分配角色
    console.log("分配角色.....");
  }
}

2.带参数的"方法装饰器"写法:

// 声明带参数的方法装饰器
function MyMethodDecorator(methodPath: string) {
  return function (
    targetClassPrototype: any,
    key: string,
    methodDecri: PropertyDescriptor
  ) {
    // 使用外界传递参数
    console.log("methodPath:", methodPath);

    console.log("targetClassPrototype:", targetClassPrototype); //
    console.log("key:", key);
    console.log("methodDecri:", methodDecri);
    methodDecri.value();
  };
}

class RoleService {
  public roleName: string = "管理员";
  constructor() {}

  // 直接在方法上使用 @ + 参数器名称 + ([...参数])
  @MyMethodDecorator("/searchFood")
  DistribRoles() {
    // 分配角色
    console.log("分配角色.....");
  }
}

知道了 “方法装饰器”的写法,发现“类装饰器”可以接收一个参数,“方法装饰器”要接收三个参数,分别是:
targetClassPrototype 参数
这里表示是类的原型对象

key 参数
这里的 key 就是方法名称

methodDecri 参数
methodDecri “数据属性”由 js自带的, 就是控制函数的属性的。有如下这些属性:

 {
    configurable?: boolean;		// 是否能参数
    enumerable?: boolean;		// 是否能使用for in 来循环返回对象的属性
    value?: any;		// 属性的值
    writable?: boolean;	//是否是可写属性
    get?(): any;		//在读取属性时调用的函数,
    set?(v: any): void;		//在写入属性时调用的函数
}

课程收获:
明白“方法装饰器”带参数和不带参数的使用。
明白“方法装饰器”中三个参数的意义
图片描述

这篇关于【九月打卡】第11天 TypeScript学习 10-13章的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!