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.參數裝飾器

相關資料