typescript vue-router代码分裂

router.ts
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

typescript RX-处理器

用于处理带流的事件的简单函数

rx-handler.ts
/**
 * @link https://github.com/johnlindquist/rx-handler
 */

import { observable, Subject } from 'rxjs';
import { share } from 'rxjs/operators';
import { OperatorFunction } from 'rxjs/interfaces';

export function handler(...operators: OperatorFunction<any, any>[]) {
  const subject$: Subject<any> = new Subject();
  const source$ = subject$.pipe.apply(subject$, [...operators, share()]);
  const next = (...args): void => subject$.next.apply(subject$, args);
  next[observable] = () => source$;

  return next;
}

typescript 等待

wait.ts
export default function wait(ms: number) {
  return () =>
    new Promise(resolve => {
      setTimeout(resolve, ms);
    });
}

typescript 以Reactive形式循环遍历所有值

ts
  Object.values(this.formSheelonim.controls).forEach((control: FormControl | FormGroup) => {
       if (control instanceof FormControl) {
            control.enable();
        } else {
                Object.values(control.controls).forEach(c => c.enable());
            }
        });

typescript 打字稿泛型示例

ts-generics.ts
interface Bookmark {
    id: string;
}
class BookmarksService {
    items: Bookmark[] = [];
}

class BookmarksService<T> {
    items: T[] = [];
}

class BookmarksService<T extends Bookmark> {
    items: T[] = [];
}

class SearchPageComponent {
    movie: Movie;
    constructor(private bs: BookmarksService<Movie>) {}
    getFirstMovie() {
        this.movie = this.bs.items[0]; // 

typescript 打字稿功能性混合物实例

ts-functional-mixin.ts
interface MyMixedObject<T> {
  setIntercept: (value: number) => MyMixedObject<T> & T;
  setSlope: (value: number) => MyMixedObject<T> & T;
  y: (x: number) => number;
}

const myFunctionalMixin = (
  { slope = 2, intercept = 1 } = { slope: 2, intercept: 1 },
) => <T extends object>(o: T): MyMixedObject<T> & T => {
  let myIntercept = intercept;
  let mySlope = slope;
  return Object.assign({}, o, {
    setIntercept(value: number): MyMixedObject<T> & T {
      myIntercept = value;
      return this;
    },
    setSlope(value: number): MyMixedObject<T> & T {
      mySlope = value;
      return this;
    },
    y(x: number): number {
      return x * mySlope + myIntercept;
    },
  });
};

const objectA = {
  eat() {
    console.log('Eat an apple');
  },
};
const objectB = {
  drink() {
    console.log('Drink a beverage');
  },
};

const myFunctionalMixinObjectA = myFunctionalMixin()(objectA);
myFunctionalMixinObjectA.eat(); // Eat an apple
console.log(myFunctionalMixinObjectA.y(1)); // (1 * 2) + 1 = 3
console.log(myFunctionalMixinObjectA.y(2)); // (2 * 2) + 1 = 5
myFunctionalMixinObjectA.setIntercept(3).setSlope(4);
console.log(myFunctionalMixinObjectA.y(1)); // (1 * 4) + 3 = 7
console.log(myFunctionalMixinObjectA.y(2)); // (2 * 4) + 3 = 11

const myFunctionalMixinObjectB = myFunctionalMixin({ slope: 3, intercept: 2 })(objectB);
myFunctionalMixinObjectB.drink(); // Drink a beverage
console.log(myFunctionalMixinObjectB.y(1)); // (1 * 3) + 2 = 5;
console.log(myFunctionalMixinObjectB.y(2)); // (2 * 3) + 2 = 8;
myFunctionalMixinObjectB.setIntercept(3).setSlope(4);
console.log(myFunctionalMixinObjectB.y(1)); // (1 * 4) + 3 = 7
console.log(myFunctionalMixinObjectB.y(2)); // (2 * 4) + 3 = 11

typescript 打字稿工厂示例

ts-factory.ts
interface MyObject {
  setIntercept: (value: number) => MyObject;
  setSlope: (value: number) => MyObject;
  y: (x: number) => number;
}

const myFactory = (
  { slope = 2, intercept = 1 } = { slope: 2, intercept: 1 },
) => {
  let myIntercept = intercept;
  let mySlope = slope;
  return {
    setIntercept(value: number): MyObject {
      myIntercept = value;
      return this;
    },
    setSlope(value: number): MyObject {
      mySlope = value;
      return this;
    },
    y(x: number): number {
      return x * mySlope + myIntercept;
    },
  };
};

const myFactoryObjectA = myFactory();
console.log(myFactoryObjectA.y(1)); // (1 * 2) + 1 = 3
console.log(myFactoryObjectA.y(2)); // (2 * 2) + 1 = 5
myFactoryObjectA.setIntercept(3).setSlope(4);
console.log(myFactoryObjectA.y(1)); // (1 * 4) + 3 = 7
console.log(myFactoryObjectA.y(2)); // (2 * 4) + 3 = 11

const myFactoryObjectB = myFactory({ slope: 3, intercept: 2 });
console.log(myFactoryObjectB.y(1)); // (1 * 3) + 2 = 5
console.log(myFactoryObjectB.y(2)); // (2 * 3) + 2 = 8
myFactoryObjectB.setIntercept(3).setSlope(4);
console.log(myFactoryObjectB.y(1)); // (1 * 4) + 3 = 7
console.log(myFactoryObjectB.y(2)); // (2 * 4) + 3 = 11

typescript 打字稿纯函数示例

ts-pure-function.ts
const myPureFunction = (x: number) => x * 2 + 1;

console.log(myPureFunction(1)); // (1 * 2) + 1 = 3
console.log(myPureFunction(2)); // (2 * 2) + 1 = 5

typescript 打字稿对象示例

ts-object.ts
const myObject = {
  intercept: 1,
  slope: 2,
  y(x: number): number {
    return x * this.slope + this.intercept;
  },
};

console.log(myObject.y(1)); // (1 * 2) + 1 = 3
console.log(myObject.y(2)); // (2 * 2) + 1 = 5

myObject.intercept = 3;
myObject.slope = 4;
console.log(myObject.y(1)); // (1 * 4) + 3 = 7
console.log(myObject.y(2)); // (2 * 4) + 3 = 11

typescript 打字稿类示例

ts-class.ts
/* tslint:disable:max-classes-per-file */
class MyClass {
  private intercept: number;
  private slope: number;

  constructor({ slope = 2, intercept = 1 } = { slope: 2, intercept: 1 }) {
    this.intercept = intercept;
    this.slope = slope;
  }
  
  public setIntercept(intercept: number) {
    this.intercept = intercept;
    return this;
  }
  
  public setSlope(slope: number) {
    this.slope = slope;
    return this;
  }
  
  public y(x: number) {
    return (x * this.slope) + this.intercept;
  }
}

class ClassA extends MyClass {
  public eat() {
    console.log('Eat an apple');
  }
}
class ClassB extends MyClass {
  public drink() {
    console.log('drink a beverage');
  }
}

const myClassObjectA = new ClassA();
myClassObjectA.eat(); // Eat an apple
console.log(myClassObjectA.y(1)); // (1 * 2) + 1 = 3
console.log(myClassObjectA.y(2)); // (2 * 2) + 1 = 5
myClassObjectA.setIntercept(3).setSlope(4);
console.log(myClassObjectA.y(1)); // (1 * 4) + 3 = 7
console.log(myClassObjectA.y(2)); // (2 * 4) + 3 = 11

const myClassObjectB = new ClassB({ slope: 3, intercept: 2 });
myClassObjectB.drink(); // Drink a beverage
console.log(myClassObjectB.y(1)); // (1 * 3) + 2 = 5
console.log(myClassObjectB.y(2)); // (2 * 3) + 2 = 8
myClassObjectB.setIntercept(3).setSlope(4);
console.log(myClassObjectB.y(1)); // (1 * 4) + 3 = 7
console.log(myClassObjectB.y(2)); // (2 * 4) + 3 = 11