你应该了解的 5 种 TypeScript 设计模式

//Simulate a database connectino classclass MyDBConn{    protected static instance: MyDBConn | null = null    private id: number = 0    constructor() {        //... db connection logic        this.id = Math.random() //the ID could represent the actual connection to the db    }        public getID(): number {        return this.id    }    public static getInstance(): MyDBConn {        if(!MyDBConn.instance) {            MyDBConn.instance = new MyDBConn()        }        return MyDBConn.instance    }}
const connections = [                        MyDBConn.getInstance(),                        MyDBConn.getInstance(),                        MyDBConn.getInstance(),                        MyDBConn.getInstance(),                        MyDBConn.getInstance()                ]connections.forEach( c => {    console.log(c.getID())

0.40470872509907130.40470872509907130.40470872509907130.40470872509907130.4047087250990713

interface Vehicle {    move(): void}//The classes we care about, the "move" method is where our "business logic" would liveclass Car implements Vehicle {    public move(): void {        console.log("Moving the car!")    }}class Bicycle implements Vehicle {    public move(): void {        console.log("Moving the bicycle!")    }}class Plane implements Vehicle {    public move(): void {        console.log("Flying the plane!")    }}//The VehicleHandler is "abstract" because noone is going to instantiate it//We want to extend it and implement the abstract methodabstract class VehicleHandler {    //This is the method real handlers need to implement    public abstract createVehicle(): Vehicle     //This is the method we care about, the rest of the business logic resides here    public moveVehicle(): void {        const myVehicle = this.createVehicle()        myVehicle.move()    }} //Here is where we implement the custom object creationclass PlaneHandler extends VehicleHandler{    public createVehicle(): Vehicle {        return new Plane()    }}class CarHandler  extends VehicleHandler{    public createVehicle(): Vehicle {        return new Car()    }}class BicycleHandler  extends VehicleHandler{    public createVehicle(): Vehicle {        return new Bicycle()    }}/// User code...const planes = new PlaneHandler()const cars = new CarHandler()planes.moveVehicle()cars.moveVehicle()

type InternalState = {    event: String}abstract class Observer {     abstract update(state:InternalState): void } 
abstract class Observable {    protected observers: Observer[] = [] //the list of observers    protected state:InternalState = { event: "" } //the internal state observers are watching    public addObserver(o:Observer):void {        this.observers.push(o)    }        protected notify() {        this.observers.forEach( o => o.update(this.state) )    }}//Actual implementationsclass ConsoleLogger extends Observer  {    public update(newState: InternalState) {        console.log("New internal state update: ", newState)    }}class InputElement extends Observable {    public click():void {        this.state = { event: "click" }        this.notify()    }}const input = new InputElement()input.addObserver(new ConsoleLogger())input.click()

abstract class Animal {    abstract move(): void}abstract class SuperDecorator extends Animal {    protected comp: Animal        constructor(decoratedAnimal: Animal) {        super()        this.comp = decoratedAnimal    }        abstract move(): void}class Dog extends Animal {    public move():void {        console.log("Moving the dog...")    }}class SuperAnimal extends SuperDecorator {    public move():void {        console.log("Starts flying...")        this.comp.move()        console.log("Landing...")    }}class SwimmingAnimal extends SuperDecorator {    public move():void {        console.log("Jumps into the water...")        this.comp.move()    }}
const dog = new Dog()console.log("--- Non-decorated attempt: ")dog.move()console.log("--- Flying decorator --- ")const superDog =  new SuperAnimal(dog)superDog.move()console.log("--- Now let's go swimming --- ")const swimmingDog =  new SwimmingAnimal(dog)swimmingDog.move()

console.log("--- Now let's go SUPER swimming --- ")const superSwimmingDog =  new SwimmingAnimal(superDog)superSwimmingDog.move()

interface IProduct {        getName(): string    getPrice(): number }//The "Component" entityclass Product implements IProduct {    private price:number     private name:string        constructor(name:string, price:number) {        this.name = name        this.price = price    }        public getPrice(): number {        return this.price    }        public getName(): string {        return this.name    }}//The "Composite" entity which will group all other composites and components (hence the "IProduct" interface)class Box implements IProduct {    private products: IProduct[] = []        contructor() {        this.products = []    }        public getName(): string {        return "A box with " + this.products.length + " products"    }         add(p: IProduct):void {        console.log("Adding a ", p.getName(), "to the box")        this.products.push(p)    }    getPrice(): number {        return this.products.reduce( (curr: number, b: IProduct) => (curr + b.getPrice()),  0)    }}//Using the code...const box1 = new Box()box1.add(new Product("Bubble gum", 0.5))box1.add(new Product("Samsung Note 20", 1005))const box2 = new Box()box2.add( new Product("Samsung TV 20in", 300))box2.add( new Product("Samsung TV 50in", 800))box1.add(box2)console.log("Total price: ", box1.getPrice())

Adding a  Bubble gum to the boxAdding a  Samsung Note 20 to the boxAdding a  Samsung TV 20in to the boxAdding a  Samsung TV 50in to the boxAdding a  A box with 2 products to the boxTotal price:  2105.5