关于typescript:TypeScript丨进阶2

Typescript长处之一：加强的oo，能够用更多设计模式，IoC，AOP...

class

js中，应用函数和基于原型的继承来创立可重用的组件
es6中，JavaScript程序员将可能应用基于类的面向对象的形式
ts中，容许开发者当初应用class更多的个性【public，private，protected...】，而不须要等到下个JavaScript版本

在构造函数里拜访 this的属性之前，咱们肯定要调用 super()。这个是TypeScript强制执行的一条重要规定。

js中，生成实例对象的传统办法是通过构造函数

function Dog(name) {  this.name = name;}Dog.prototype.voice = () => {  console.log("wang wang wang");};const dog = new Dog("yello dog");dog.voice();// 输入：wang wang wang

ts中，咱们能够应用更多的个性，更好的oo编程

一个例子形容所有个性【public / private / protected / readonly / static / 存取器[get/set] / 继承 / 重写】

/*  基类/超类 */class Animal {  // 构造函数初始化赋值的两种写法  // 1.  // private what: string;  // constructor(what: string) {  //   this.what = what;  // }  // 2.  constructor(private what: string) {}  public eat() {    console.log("i am an animal，i eat");  }}/*  派生类 / 子类  ts规定子类必须要在构造函数写 super() */class Dog extends Animal {  public name: string;  protected color: string;  readonly legs: number;  constructor(name: string = "", color: string = "") {    super("dog");    this.name = name;    this.color = color;    this.legs = 4;  }  public voice() {    console.log("wang wang wang...");  }}const dog = new Dog();/*  继承 Dog */class YellowDog extends Dog {  // 动态变量被所有的对象所共享，在内存中只有一个正本，它当且仅当在类首次加载时会被初始化  static yellowDogNum: number = 0;  public firstName: string = "";  public lastName: string = "";  // 存取器  get fullName(): string {    return this.firstName + "." + this.lastName;  }  set fullName(fullName: string) {    if (fullName === "dog.king") {      console.log("名字不能为dog.king");    }  }  constructor(name: string, color: string) {    super(name, color);    YellowDog.yellowDogNum += 1;    this.color = "yellow yellow yellow";    // 在子类中能够拜访父类的 protected 成员    // this.what = "";    // 在子类中不能够拜访父类的 private 成员    // error：Property 'what' is private and only accessible within class 'Animal'.    console.log(this.getDogNums());  }  private getDogNums() {    return `当初一共有${YellowDog.yellowDogNum}只黄狗`;  }  // 重写 父类 eat 办法  public eat() {    console.log("i am YelloDog，i eat");    // 调用父类办法    console.log("parent-eat：");    super.eat();  }}const yellowDog = new YellowDog("yellow dog", "yellow");// 当初一共有1只黄狗console.log(yellowDog);yellowDog.legs = 5;// 不能批改read-only属性// error：Cannot assign to 'legs' because it is a read-only property.console.log(yellowDog.what);// 实例对象不能够拜访 private 成员// error：Property 'what' is private and only accessible within class 'Animal'.console.log(yellowDog.color);// 实例对象不能够拜访 protected 成员// error：Property 'what' is private and only accessible within class 'Animal'.yellowDog.eat();// 输入：i am YelloDog，i eatyellowDog.firstName = "dog";yellowDog.lastName = "queen";console.log(yellowDog.fullName);// 输入：dog.queenyellowDog.fullName = "dog.king";// 输入：名字不能为dog.kingconst yellowDog2 = new YellowDog("yellow dog2", "yellow2");// 输入：当初一共有2只黄狗const yellowDog3 = new YellowDog("yellow dog3", "yellow3");// 输入：当初一共有3只黄狗

抽象类

抽象类中的形象办法不蕴含具体实现并且必须在派生类中实现

abstract class Person {  constructor(public name: string) {}  printName(): void {    console.log("Person name: " + this.name);  }  // 必须在派生类中实现  abstract working(): void;}class Workman extends Person {  constructor() {    super("工人");  }  working(): void {    console.log("working 8 hours");  }  rest(): void {    console.log("rest...");  }}// 容许创立一个对形象类型的援用let workman: Person;workman = new Person();// 谬误：不能创立一个抽象类的实例// 容许对一个形象子类进行实例化和赋值workman = new Workman();workman.printName();workman.working();workman.rest();// 谬误：办法在申明的抽象类中不存在

把类当做接口应用

因为类能够创立出类型，所以你可能在容许应用接口的中央应用类，
所以同名的类和接口也会被合并

class User {  id?: string;  age?: number;  sleep?: () => void;  run() {    return "run";  }}interface User {  name: string;  hobby: string;  play: () => string[];}const user: User = {  name: "zhangsan",  hobby: "working",  play() {    return ["game", "ball"];  },  run() {    return "running";  }};

装璜器 (Decorators)

在一些场景下咱们须要额定的个性来反对标注或批改类及其成员。
装璜器为咱们在类的申明及成员上通过元编程语法增加标注提供了一种形式。
Javascript里的装璜器目前处在征集阶段，但在TypeScript里已做为一项实验性个性予以反对。
装璜器是一种非凡类型的申明，它可能被附加到类、办法、拜访符、属性、参数上。
装璜器应用 @expression这种模式，esxpression求值后必须为一个函数，它会在运行时被调用，被装璜的申明信息做为参数传入。
装璜器要传入参数的话必须再包一层函数，而后 return 装璜器函数

先理解 Typescript 内置接口 PropertyDescriptor【属性描述符】

interface PropertyDescriptor {  /*     configurable 键值为 true 时，    可能从新定义属性，    可能删除属性    默认：false  */  configurable?: boolean;  /*    是否可枚举    for..in    Object.keys    JSON.stringify    Object.assign()    默认 false   */  enumerable?: boolean;  // 属性的值  value?: any;  /*   当且仅当该属性的 writable 键值为 true 时，   属性的值，能力被赋值运算符扭转。    默认 false   */  writable?: boolean;  get?(): any;  set?(v: any): void;}

类装璜器

interface Test {  fn: () => void;}// 附加到 类 只能有一个参数，target，是一个构造函数const Inject = (fn: () => void = () => {}) => (target: any) => {  // 动态成员赋值形式  // target.fn = fn;  target.prototype.fn = fn;};@Inject(() => {  console.log("my name is fn");})class Test {}const test = new Test();console.log(test.fn());// 输入：my name is fn

办法装璜器

// 装璜器有参数const makeFriends = (key: string) => {  return (    target: any,    propertyKey: string,    // 属性形容    descriptor: PropertyDescriptor  ) => {    const origin = descriptor.value;    descriptor.value = function (...args: any[]) {      (this as any)[key] = true;      origin.apply(this, args);      (this as any)[key] = false;    };  };};interface Test {  fn: () => void;}class Test {  private _goOut: boolean;  role: string;  constructor() {    this._goOut = false;    this.role = "parent";  }  get goOut() {    return this._goOut;  }  set goOut(val: boolean) {    this._goOut = val;    console.log("current-goOut :>> ", this._goOut);  }  @makeFriends("goOut")  sayHello(name: string, age: number) {    console.log("currthis.role :>> ", this.role);    console.log(`hi，my name is ${name}，i am ${age} years old`);  }}const test = new Test();test.sayHello("zhangsan", 10);

控制台输入

current-goOut :>>  truecurrthis.role :>>  parent hi，my name is zhangsan，i am 10 years old current-goOut :>>  false

当有多个装璜器的时候。
装璜器会由上至下顺次对装璜器表达式求值。
求值的后果会被当作函数，由下至上顺次调用。

如

class Xx{  @f  @g  xxx}等价于 f(g(xxx))

拜访符/属性/参数润饰器

// appendStr.ts/** * 拜访符 * @desc 追加字符串 */const appendStr = (apdStr: string = "") => (  target: any,  propertyKey: string,  descriptor: PropertyDescriptor) => {  const origin = descriptor.set;  descriptor.set = function (val: string = "") {    origin!.call(this, val + apdStr);  };};// initProp.ts/** * 属性 * @desc 初始化值 */const initProp = (val: string = "") => (target: any, propertyKey: string) => {  target[propertyKey] = val;};// log.ts/** * 参数 */const log = (target: any, propertyKey: string, parameterIndex: number) => {  console.log("参数地位", parameterIndex);};// index.tsclass Test {  private _a: string;  @initProp("hello")  public b?: string;  constructor() {    this._a = "";  }  get a() {    return this._a;  }  @appendStr("haha")  set a(val: string) {    this._a = val;  }  hello(@log c: string) {}}// 实例const test = new Test();// 拜访符测试test.a = "xixi";console.log(test.a);// 输入：xixihaha// 属性测试console.log(test.b);// 输入：hello

AOP（Aspect Oriented Programming）

次要实现的目标是针对业务处理过程中的切面进行提取，所面对的是处理过程中某个步骤或阶段，以取得逻辑过程中各局部之间低耦合性的隔离成果。
AOP是对OOP的一个横向的补充，次要作用是把一些业务无关的性能抽离，例如日志打印、统计数据、安全控制、异样解决等。这些性能都与外围业务无关，但又随处可见。将其抽离进去用动静插入的形式嵌入到各业务逻辑中。让业务模块变得比拟洁净、不受净化，同时性能点可能失去很好的复用，给模块解耦。

前置告诉、后置告诉、盘绕告诉

如：

before（前置告诉）
场景：
提交表单时，咱们想要先通过一系列的验证，而后再执行表单提交
零碎统计用户点击某个按钮的次数

around（盘绕告诉）
场景：提交表单的时候，点击提交按钮。我想要在提交前把按钮禁用掉，而后提交胜利后【ajax申请后】把按钮启用。

盘绕告诉例子

ThorttleButton.ts

/** * @desc 按钮节流开关，场景：用在异步提交表单的时候，避免用户反复提交 * 1开 0关 * @param prop */const ThorttleButton = (prop: string) => (  target: any,  propertyKey: string,  descriptor: PropertyDescriptor): any => {  const origin = descriptor.value;  descriptor.value = async function(...args: any[]) {    (this as any)[prop] = false;    await origin.apply(this, args);    (this as any)[prop] = true;  };};export default ThorttleButton;

调用

<!-- ... --><button :disabled="postBtn">提交</button><!-- ... -->import ThorttleButton from '@/utils/decorate/ThorttleButton';// ...postBtn: boolean = true;// ...@ThorttleButton('postBtn')async postForm() {  await this.$request.post('/postData');}// ...

IoC（Inversion of Control）

管制反转思维
依赖倒置准则（Dependence Inversion Principle）
依赖注入（Dependency Injection）是具体实现
高层次的模块不应该依赖于低层次的模块
形象不应该依赖于具体实现，具体实现应该依赖于形象
面向接口编程
能够解耦具备依赖关系的对象，升高开发保护老本

假如咱们要实现一个 App，App有几个模块
停车场模块，统计停车场共有几辆车
用户性能，显示停车场的所有用户

于是咱们开始编写模块

car.ts

class Car {  constructor() {}  getNum() {    const num = 1000;    console.log("初始化显示所有车辆数：", num);    return num;  }}export default Car;

user.ts

class User {  constructor() {}  getAll() {    const users = Array.apply(Array, Array(1000)).map((_, i) => ({      id: i + 1,      name: "张三" + i    }));    console.log("初始化显示所有用户：", users);    return users;  }}export default User;

App.ts

import Car from "./car";import User from "./user";class App {  car: Car;  user: User;  advertising: Advertising;  constructor() {    this.car = new Car();    this.user = new User();    this.init();  }  init() {    this.car.getNum();    this.user.getAll();  }}export default App;

index.ts

import App from "./App";new App();

上线稳固后，产品经理筹备新增广告【advertising】性能了
于是咱们新增了

advertising.ts【新增】

class Advertising {  constructor() {}  getAll() {    const users = Array.apply(Array, Array(3)).map((_, i) => ({      id: i + 1,      name: "轮播广告" + i    }));    console.log("初始化显示所有广告：", users);    return users;  }}export default Advertising;

App.ts【批改】

import Car from "./car";import User from "./user";// 新增import Advertising from "./advertising";class App {  car: Car;  user: User;  advertising: Advertising;  constructor() {    this.car = new Car();    this.user = new User();    // 新增    this.advertising = new Advertising();    this.init();  }  init() {    this.car.getNum();    this.user.getAll();    // 新增    this.advertising.getAll();  }}export default App;

剖析：
从App来看，会迭代更新，模块会越来越多
从IoC来看，this.car 和 this.user ...，都还是对 “具体实现” 的依赖。违反了 IoC思维的准则，须要进一步形象 App 模块。
从编码上来看，这种不完全符合 “开闭准则” 的形式很容易产生额定的bug。

咱们来革新一下

革新App.ts

import { TModule } from "./modules.type";interface App {  [prop: string]: any;}class App {  static modules: TModule[] = [];  constructor() {    App.modules.forEach((module) => {      module.init(this);    });  }  // 依赖注入  static inject(module: TModule) {    App.modules.push(module);  }}export default App;

新增了 modules.type.ts 文件，用来申明束缚须要注入的module

import Car from "./car";//import User from "./user";//import Advertising from "./advertising";export type TModule = Car

革新car.ts

import App from "./App";class Car {  constructor() {}  init(app: App){    app.car = this;  }  getNum() {    const num = 1000;    console.log("初始化显示所有车辆数：", num);    return num;  }}export default Car;

在index.ts里

import App from "./App";import Car from "./car";App.inject(new Car());const app = new App();(app.car as Car).getNum();// 初始化显示所有车辆数：1000

还没完，咱们要更灵便，更优雅

咱们实现一个类装璜器，用于实例化所依赖的低层模块，并将其注入到容器（App）内

新增 decrotate.inject.ts

import { TModule } from "./modules.type";const Inject = (modules: TModule[]) => (  target: any,  propertyKey: string,  descriptor: PropertyDescriptor) => {  modules.forEach((module: TModule) => {    module.init(target);  });};export default Inject;