TypeScript常用知识之--类定义和装饰器类的定义装饰器 1. 类的装饰器 2.方法装饰器 4.属性装饰器 5.

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

因为Typescript的持续火爆，分享下TS的常用知识点，我们一起学习交流，一起加油！

类的定义

1.修饰符

1.public 代表公有，不论内部还是外部都可以访问

2.protected 代表保护，只有子类和自己可以访问

3.private 代表私有，只有自己可以访问

2.readonly 只读属性

3.static 静态属性，可以使用类直接访问

4.extends 继承

5.super 代表父类，可以调用父类的方法

class Person {
  // 公有属性
  public readonly name: string;
  public age: number;

  private id: string = "id";

  protected gender: string = "male";

  public static email: string = "test@test.com";

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // 如果不想在构造函数之前声明变量可以使用下面的方式
  // constructor(public name: string, public age: number) {
  //   this.name = name;
  //   this.age = age;
  // }

  protected getName(): string {
    return this.name;
  }

  getAge(): number {
    return this.age;
  }

  setAge(age: number): void {
    this.age = age;
  }

  getId(): string {
    return this.id;
  }
}

class PoliceMan extends Person {
  // 因为这边name和age都是父类继承过来,所有可以不用声明
  constructor(name: string, age: number) {
    // 执行super方法来调用父类的 constructor
    super(name, age);
  }

  private policeNo: string = "11111";

  printId() {
    // 因为id是私有属性，所以这里会报错
    // console.log(this.id)
  }

  printGender() {
    // 因为是保护属性 所以这里可以取到父类的gender属性
    console.log(this.gender);
  }
}

const person = new Person("Tom", 20);
// 可以任意访问公有属性
console.log(person.name); // Tom
// readonly属性不能被复制
// person.name='Cherry';

// 访问static静态属性
console.log(Person.email); // test@test.com"

// 无法访问 私有属性
// console.log(person.id)
// 如果要访问只能通过内部的方法
console.log(person.getId()); // id

const policeMan = new PoliceMan("David", 30);

//如果要访问父类的 protect 属性不能在外部访问 只能在调用方法访问
console.log(policeMan.printGender());
// 访问父类的静态方法
console.log(PoliceMan.email);

装饰器

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

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

注意：要是用装饰器，必须在tsconfig.json中设置experimentalDecorators 为true

"compilerOptions": {

"experimentalDecorators": true,

}

1. 类的装饰器

类的构造函数是其唯一的参数

// 通过类装饰器返回一个新的class
function classDecorator(constructor: Function) {
    return class {
        name: string = "David";
        age: number = 11;
    };
}

@classDecorator
class Animal {
    name: string = "Tom";
}

const animal = new Animal();
// 这里ts的默认推导不出来，所以使用了断言来强转
console.log((animal as any).age); //11

function classDecoratorFactor(name: string) {
    return function (constructor: Function) {
        constructor["gender"] = "male"; // 这里相当于给给类的static上复制
        // 给对象的原型链上的name复制
        constructor.prototype.name = name;
        // 给对象的原型链上的添加setName方法
        constructor.prototype.getName = function (): string {
            return name;
        };
    };
}
// 类型装饰器工厂
@classDecoratorFactor("River")
class Person {
    static gender: string;
    name: string;
    getName() {}
}

const person = new Person();
console.log(person.name); //River
console.log(person.getName()); //River
console.log(Person.gender); //male

2.方法装饰器

对方法进行装饰,返回的值是

1.对于static成员员来说是类的构造函数，对于实例成员是类的原型对象。

2.成员的名字。

3.成员的属性描述符。

function decoratorMethod(str: string) {
    return function (proto: any, key: string, descriptor: PropertyDescriptor) {
      // 重写方法
      descriptor.value = function () {
        return str;
      };
    };
  }

class SaleMan {
    @decoratorMethod("women")
    say() {
        // console.log("I am sale man ");
    }
}

const saleMan = new SaleMan();
console.log(saleMan.say());

4.属性装饰器

对方法进行装饰,返回的值是

1.对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。*

2.成员的名字。

function decoratorProperty(str: string) {
    return function (proto: any, key: string): any {
      const descriptor: PropertyDescriptor = {
        writable: true,
      };
      proto[key] = str;
      return descriptor;
    };
  }

  class BusinessMan {
    @decoratorProperty("BusinessWoman")
    name: string;
  }

  const businessMan = new BusinessMan();
  //获取原型上的name
  console.log((businessMan as any).__proto__.name);

5.参数装饰器

对方法进行装饰,返回的值是

1.对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。

2.成员的名字。

3.参数在函数参数列表中的索引。

function addAge(target: any, propertyKey: string, paramIndex: number) {
    console.log(propertyKey)
    console.log(paramIndex)
  }

  class Person2 {
    //   參數裝飾器
    showName(@addAge name: string) {
    }
  }

  const person2=new Person2();
  person2.showName('Dannie');// 打印 showName 和

TypeScript常用知识之--类定义和装饰器

类的定义

装饰器

1. 类的装饰器

2.方法装饰器

4.属性装饰器

5.参数装饰器

相关资料