ts中class的使用

属性方法

实例的属性、方法

定义在构造函数中，或者直接定义；

class Animal {
  constructor(public name: string, public legsNum: number) {
    this.name = name;
    this.legsNum = legsNum;
  }
}
class Dog extends Animal {
  public static kind: string = "秋田"; //定义 类的属性
  public static sayKind() {
    //定义 类的方法
    return "I am " + this.kind + " 犬";
  }
  // constructor中定义的是 实例属性
  constructor(public name: string, public legsNum: number, public age: number) {
    super(name, legsNum);
    this.age = age;
  }
  // 直接定义，也是定义的 实例属性
  private color: string = "black";
  // 定义 实例方法，也是 原型方法，编译后方法say会在 Dog.prototype.say Dog的构造函数原型上
  say() {
    console.log("I am " + this.age + " years old");
  }
  /****** 定义原型属性, ****** */
  get value() {
    return this.color;
  }
  set value(newValue) {
    this.color = newValue;
  }
}
let animal = new Animal("动物", 0);
let dog = new Dog("旺财", 4, 2);
console.log(Dog.kind);
console.log(Dog.sayKind());
dog.say();
console.log(dog.value);
dog.value = "white";
console.log(dog.value);

类的属性、方法

通过类中的static实现
用static定义的属性或方法，只能通过类使用，如：kind和sayKind

class Animal {
  constructor(public name: string, public legsNum: number) {
    this.name = name;
    this.legsNum = legsNum;
  }
}
class Dog extends Animal {
  public static kind: string = "秋田"; //定义 类的属性
  public static sayKind() {
    //定义 类的方法
    return "I am " + this.kind + " 犬";
  }
  // constructor中定义的是 实例属性
  constructor(public name: string, public legsNum: number, public age: number) {
    super(name, legsNum);
    this.age = age;
  }
  // 直接定义，也是定义的 实例属性
  private color: string = "black";
  // 定义 实例方法，也是 原型方法，编译后方法say会在 Dog.prototype.say Dog的构造函数原型上
  say() {
    console.log("I am " + this.age + " years old");
  }
  /****** 定义原型属性, ****** */
  get value() {
    return this.color;
  }
  set value(newValue) {
    this.color = newValue;
  }
}
let animal = new Animal("动物", 0);
let dog = new Dog("旺财", 4, 2);
console.log(Dog.kind);
console.log(Dog.sayKind());
dog.say();
console.log(dog.value);
dog.value = "white";
console.log(dog.value);

原型的属性、方法

通过类中关键字set、get实现；通过属性访问器定义原型属性
对value的定义，会挂载到Dog.prototype.value上

class Animal {
  constructor(public name: string, public legsNum: number) {
    this.name = name;
    this.legsNum = legsNum;
  }
}
class Dog extends Animal {
  public static kind: string = "秋田"; //定义 类的属性
  public static sayKind() {
    //定义 类的方法
    return "I am " + this.kind + " 犬";
  }
  // constructor中定义的是 实例属性
  constructor(public name: string, public legsNum: number, public age: number) {
    super(name, legsNum);
    this.age = age;
  }
  // 直接定义，也是定义的 实例属性
  private color: string = "black";
  // 定义 实例方法，也是 原型方法，编译后方法say会在 Dog.prototype.say Dog的构造函数原型上
  say() {
    console.log("I am " + this.age + " years old");
  }
  /****** 定义原型属性, ****** */
  get value() {
    return this.color;
  }
  set value(newValue) {
    this.color = newValue;
  }
}
let animal = new Animal("动物", 0);
let dog = new Dog("旺财", 4, 2);
console.log(Dog.kind);
console.log(Dog.sayKind());
dog.say();
console.log(dog.value);
dog.value = "white";
console.log(dog.value);

装饰器

装饰器的作用：

• 扩展类中的属性或方法
• 扩展类的功能

  装饰器只能修饰类、类的属性、类的方法，三种

装饰器修饰类

// 装饰器收集时，从上往下
// 装饰器的执行顺序，先执行say3,再执行say2，最后执行say1
function say1(val) {
  console.log(val);
  return function (target: string) {
    console.log("say1");
  };
}
function say2(val) {
  console.log(val);
  return function (target: string) {
    console.log("say2");
  };
}
function say3(val) {
  console.log(val);
  return function (target: string) {
    console.log("say3");
  };
}
@say1(1)
@say2(2)
@say3(3)
class Person {}
// 1 2 3 say3 say2 say1

装饰器修饰属性

可以对属性或静态属性进行修饰，类似vue2中的指令

// target是类的原型，key是修饰的属性
function toUpperCase(target: any, key: string) {
  let val: string = "";
  Object.defineProperty(target, key, {
    get() {
      return val.toUpperCase();
    },
    set(newVal) {
      val = newVal;
    },
  });
}
// 修饰静态属性，此时target为类本身
function double(num:number){
  return function (target: any, key: string) { // target表示的类
    let val = target[key]
    Object.defineProperty(target, key, {
      get(){
        return num * val
      }
    })
  }
}
class Person {
  @toUpperCase
  public name: string = 'world';
  @double(2)
  static age: number = 18; //定义的静态属性，通过类调用
}
let p = new Person()
console.log(p.name, Person.age) //WORLD

装饰器修饰方法

function isEnumMember(flag: boolean){
  return function (target: any, key: string, descriptor: PropertyDescriptor){
    // 表示是否可被枚举
    descriptor.enumerable = flag
  }
}
class Person {
  @isEnumMember(false)
  getMoney(){}
}

装饰器修饰参数

function params(target:any, key: string, index: number){
  console.log(key, index);
}
class Person {
  run(@params time: string){}
}