TypeScript: Factory Method pattern

人与人沟通，除了信息对称之外，还有认知....

npm install -g typescript
npm install -g ts-node

index.ts

//import * as fs from "fs";

//TypeScript 工厂方法模式  Factory Method in TypeScript
/**
 * The Creator class declares the factory method that is supposed to return an
 * object of a Product class. The Creator's subclasses usually provide the
 * implementation of this method.
 */
abstract class Creator {
    /**
     * Note that the Creator may also provide some default implementation of the
     * factory method.
     */
    public abstract factoryMethod(): Product;

    /**
     * Also note that, despite its name, the Creator's primary responsibility is
     * not creating products. Usually, it contains some core business logic that
     * relies on Product objects, returned by the factory method. Subclasses can
     * indirectly change that business logic by overriding the factory method
     * and returning a different type of product from it.
     */
    public someOperation(): string {
        // Call the factory method to create a Product object.
        const product = this.factoryMethod();
        // Now, use the product.
        return `Creator: The same creator's code has just worked with ${product.operation()}`;
    }
}

/**
 * Concrete Creators override the factory method in order to change the
 * resulting product's type.
 */
class ConcreteCreator1 extends Creator {
    /**
     * Note that the signature of the method still uses the abstract product
     * type, even though the concrete product is actually returned from the
     * method. This way the Creator can stay independent of concrete product
     * classes.
     */
    public factoryMethod(): Product {
        return new ConcreteProduct1();
    }
}

class ConcreteCreator2 extends Creator {
    public factoryMethod(): Product {
        return new ConcreteProduct2();
    }
}

/**
 * The Product interface declares the operations that all concrete products must
 * implement.
 */
interface Product {
    operation(): string;
}

/**
 * Concrete Products provide various implementations of the Product interface.
 */
class ConcreteProduct1 implements Product {
    public operation(): string {
        return '{Result of the ConcreteProduct1 涂聚文}';
    }
}
/**
 * 返回字符串
 */
class ConcreteProduct2 implements Product {
    public operation(): string {
        return '{Result of the ConcreteProduct2 Geovin Du}';
    }
}

/**
 * The client code works with an instance of a concrete creator, albeit through
 * its base interface. As long as the client keeps working with the creator via
 * the base interface, you can pass it any creator's subclass.
 */
function clientCode(creator: Creator) {
    // ...
    console.log('Client: I\'m not aware of the creator\'s class, but it still works.');
    console.log(creator.someOperation());
    // ...
}




const hello : string = "Hello World,This is a typescript!,涂聚文，hi."
console.log(hello)

console.log('App: Launched with the ConcreteCreator1.');
let cr1=new ConcreteCreator1();
clientCode(cr1);
let pu1:string =cr1.someOperation();
console.log('');

console.log('App: Launched with the ConcreteCreator2.');
let cr2=new ConcreteCreator2();
clientCode(cr2);
let pu2:string=cr2.someOperation();
console.log("geovindu");


let message: string = 'Hello World,This is a typescript!,涂聚文 Web';
document.body.innerHTML = message+","+pu1+","+pu2+",TypeScript 工厂方法模式";
/*
const path = "./src/message.txt";
const data = "Hello World!";
const encoding = "utf8";

console.log(data);

fs.writeFile(path, data, encoding, error => {
    if (error) {
        console.log(error);
    }
});
*/

//https://code.visualstudio.com/docs/typescript/typescript-debugging

 

输出：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <head><title>TypeScript Hello Web</title>
      <meta name="Description" content="geovindu,涂聚文,Geovin Du"/>
      <meta name="Keywords" content="geovindu,涂聚文,Geovin Du"/>
      <meta name="author" content="geovindu,涂聚文,Geovin Du"/>   
    </head>
    <body>
        <script src="dist/index.js"></script>
    </body>
</html>

　　

　　

 

posted @ 2023-09-25 17:26  ®Geovin Du Dream Park™  阅读(26)  评论(0)    收藏  举报