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

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

由于Typescript的持续火爆，分享下TS的经常使用知识点，咱们一块儿学习交流，一块儿加油！算法

类的定义

1.修饰符typescript

1.public 表明公有，不论内部仍是外部均可以访问express

2.protected 表明保护，只有子类和本身能够访问json

3.private 表明私有，只有本身能够访问markdown

2.readonly 只读属性网络

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

4.extends 继承ide

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.参数装饰器

相关资料