& {
65 | colors?: CustomThemeProps;
66 | };
67 |
--------------------------------------------------------------------------------
/chapters/chapter-2_Core_Principles_and_use_cases/webpack/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
5 |
6 |
7 |
8 | Typescript 4 Design Patterns
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/chapters/chapter-2_Core_Principles_and_use_cases/webpack/index.js:
--------------------------------------------------------------------------------
1 | /******/ (() => { // webpackBootstrap
2 | /******/ "use strict";
3 | var __webpack_exports__ = {};
4 | /******/ })()
5 | ;
--------------------------------------------------------------------------------
/chapters/chapter-2_Core_Principles_and_use_cases/webpack/index.ts:
--------------------------------------------------------------------------------
1 | const par = document.getElementsByClassName("paragraph")[0];
2 |
3 | const span = document.createElement("span");
4 | span.textContent = "This is a text we added dynamically";
5 | par?.appendChild(span);
6 |
7 | const button = document.querySelector("button");
8 | button?.addEventListener("click", () => {
9 | window.alert("Did you Clicked the Submit Button");
10 | });
11 |
--------------------------------------------------------------------------------
/chapters/chapter-2_Core_Principles_and_use_cases/webpack/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "commonjs",
4 | "target": "es5",
5 | "esModuleInterop": true
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/chapters/chapter-2_Core_Principles_and_use_cases/webpack/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | module.exports = {
4 | entry: path.resolve(__dirname, "./index.ts"),
5 | devtool: "inline-source-map",
6 | module: {
7 | rules: [
8 | {
9 | test: /\.tsx?$/,
10 | use: "ts-loader",
11 | exclude: /node_modules/,
12 | },
13 | ],
14 | },
15 | resolve: {
16 | extensions: [".tsx", ".ts", ".js"],
17 | },
18 | output: {
19 | filename: "index.js",
20 | path: path.resolve(__dirname, "./"),
21 | },
22 | devServer: {
23 | contentBase: path.join(__dirname, "./"),
24 | compress: true,
25 | port: 9000,
26 | },
27 | };
28 |
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/TypeScript-4-Design-Patterns-and-Best-Practices/794888bd4c351b9565e01828440e3d0cf06d26c6/chapters/chapter-3_Creational_Design_Patterns/.gitkeep
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/AbstractFactory.test.ts:
--------------------------------------------------------------------------------
1 | import {
2 | HTMLWebsitePageFactory,
3 | WebsitePageFactory,
4 | HTMLContent,
5 | HTMLHeader,
6 | HTMLFooter,
7 | } from "./AbstractFactory";
8 |
9 | const wpf: WebsitePageFactory = new HTMLWebsitePageFactory();
10 | test("it creates an HTML Content type", () => {
11 | const content = wpf.createContent("Content");
12 | expect(content).toBeInstanceOf(HTMLContent);
13 | expect(content.content).toBe("Content");
14 | });
15 | test("it creates an HTML Header type", () => {
16 | const header = wpf.createHeader("Header");
17 | expect(header).toBeInstanceOf(HTMLHeader);
18 | expect(header.content).toBe("Header");
19 | });
20 | test("it creates an HTML Footer type", () => {
21 | const footer = wpf.createFooter("Footer");
22 | expect(footer).toBeInstanceOf(HTMLFooter);
23 | expect(footer.content).toBe("");
24 | });
25 |
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/AbstractFactory.ts:
--------------------------------------------------------------------------------
1 | export interface WebsitePageFactory {
2 | createHeader(text: string): Header;
3 | createContent(text: string): Content;
4 | createFooter(text: string): Footer;
5 | }
6 |
7 | interface Header {
8 | content: string;
9 | }
10 |
11 | interface Content {
12 | content: string;
13 | }
14 |
15 | interface Footer {
16 | content: string;
17 | }
18 |
19 | export class HTMLWebsitePageFactory implements WebsitePageFactory {
20 | createHeader(text: string): HTMLHeader {
21 | return new HTMLHeader(text);
22 | }
23 | createContent(text: string): HTMLContent {
24 | return new HTMLContent(text);
25 | }
26 | createFooter(text: string): HTMLFooter {
27 | return new HTMLFooter(text);
28 | }
29 | }
30 |
31 | export class HTMLHeader implements Header {
32 | content: string;
33 | constructor(text: string) {
34 | this.content = `${text}`;
35 | }
36 | }
37 |
38 | export class HTMLContent implements Content {
39 | content: string;
40 | constructor(text: string) {
41 | this.content = `${text}`;
42 | }
43 | }
44 |
45 | export class HTMLFooter implements Footer {
46 | content: string;
47 | constructor(text: string) {
48 | this.content = ``;
49 | }
50 | }
51 |
52 | const wpf: WebsitePageFactory = new HTMLWebsitePageFactory();
53 | console.log(wpf.createContent("Content").content);
54 | console.log(wpf.createHeader("Header").content);
55 | console.log(wpf.createFooter("Footer").content);
56 |
57 | type Circle = string;
58 | type CircleProps = {
59 | cx: number;
60 | cy: number;
61 | radius: number;
62 | };
63 | type RectangleProps = {
64 | x1: number;
65 | y1: number;
66 | width: number;
67 | height: number;
68 | };
69 |
70 | interface BrowserGraphicsFactory {
71 | drawCircle(props: CircleProps): Circle;
72 | drawRectangle(props: RectangleProps): Circle;
73 | }
74 |
75 | // class CanvasGraphicsFactory implements BrowserGraphicsFactory {
76 |
77 | // }
78 |
79 | // class SVGGraphicsFactory implements BrowserGraphicsFactory {
80 |
81 | // }
82 |
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/FactoryMethod.test.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Weapon,
3 | LongBow,
4 | LongSword,
5 | LongBowFactory,
6 | LongSwordFactory,
7 | } from "./FactoryMethod";
8 |
9 | let lbf: LongBowFactory;
10 | let lsf: LongSwordFactory;
11 | beforeEach(() => {
12 | lbf = new LongBowFactory();
13 | lsf = new LongSwordFactory();
14 | });
15 |
16 | test("it creates a LongBow type using the factory", () => {
17 | const weapon = lbf.create();
18 | expect(weapon).toBeInstanceOf(LongBow);
19 | });
20 |
21 | test("it creates a LongSword type using the factory", () => {
22 | const weapon = lsf.create();
23 | expect(weapon).toBeInstanceOf(LongSword);
24 | });
25 |
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/FactoryMethod.ts:
--------------------------------------------------------------------------------
1 | export interface Weapon {
2 | getName(): string;
3 | getDamage(): number;
4 | getRange(): number;
5 | }
6 |
7 | export class LongSword implements Weapon {
8 | getName(): string {
9 | return "LongSword";
10 | }
11 | getDamage(): number {
12 | return 10;
13 | }
14 | getRange(): number {
15 | return 2;
16 | }
17 | }
18 |
19 | export class LongBow implements Weapon {
20 | getName(): string {
21 | return "LongBow";
22 | }
23 | getDamage(): number {
24 | return 8;
25 | }
26 | getRange(): number {
27 | return 16;
28 | }
29 | }
30 |
31 | interface WeaponFactory {
32 | create(): Weapon;
33 | }
34 |
35 | export class LongSwordFactory implements WeaponFactory {
36 | create(): Weapon {
37 | return new LongSword();
38 | }
39 | }
40 | export class LongBowFactory implements WeaponFactory {
41 | create(): Weapon {
42 | return new LongBow();
43 | }
44 | }
45 |
46 | const lbf = new LongBowFactory();
47 | const lsf = new LongSwordFactory();
48 | const factories: WeaponFactory[] = [lbf, lsf, lbf];
49 | factories.forEach((f: WeaponFactory) => {
50 | console.debug(f.create());
51 | });
52 |
53 | const enum WeaponType {
54 | LONGBOW,
55 | LONGSWORD,
56 | }
57 |
58 | class WeaponCreator {
59 | create(weaponType: WeaponType): Weapon {
60 | switch (weaponType) {
61 | case WeaponType.LONGBOW: {
62 | return new LongBow();
63 | break;
64 | }
65 | case WeaponType.LONGSWORD: {
66 | return new LongSword();
67 | break;
68 | }
69 | }
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/FactoryMethodType.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/TypeScript-4-Design-Patterns-and-Best-Practices/794888bd4c351b9565e01828440e3d0cf06d26c6/chapters/chapter-3_Creational_Design_Patterns/FactoryMethodType.ts
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/InversifySingleton.ts:
--------------------------------------------------------------------------------
1 | import "reflect-metadata";
2 | import { injectable, Container } from "inversify";
3 |
4 | interface UsersApiService {
5 | getUsers(): Promise;
6 | }
7 |
8 | let TYPES = {
9 | UsersApiService: Symbol("UsersApiService"),
10 | };
11 |
12 | @injectable()
13 | class UsersApiServiceImpl implements UsersApiService {
14 | getUsers(): Promise {
15 | return Promise.resolve(["Alex", "John", "Sarah"]);
16 | }
17 | }
18 |
19 | // set up container
20 | const container = new Container();
21 | // set up bindings
22 | container
23 | .bind(TYPES.UsersApiService)
24 | .to(UsersApiServiceImpl)
25 | .inSingletonScope();
26 |
27 | container
28 | .get(TYPES.UsersApiService)
29 | .getUsers()
30 | .then((res) => console.log(res));
31 | export default container;
32 |
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/ModuleSingleton.ts:
--------------------------------------------------------------------------------
1 | class ApiServiceSingleton {}
2 |
3 | export default new ApiServiceSingleton();
4 |
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/ParametricSingleton.ts:
--------------------------------------------------------------------------------
1 | export class ParametricSingleton {
2 | private param: string;
3 | // Stores the singletons instances
4 | private static instances: Map;
5 | // Prevents creation of new instances
6 | private constructor(param: string) {
7 | this.param = param;
8 | }
9 | // Method to retrieve instance
10 | static getInstance(param: string) {
11 | if (!ParametricSingleton.instances.has(param)) {
12 | ParametricSingleton.instances.set(param, new ParametricSingleton(param));
13 | }
14 | return ParametricSingleton.instances.get(param);
15 | }
16 | }
17 |
18 | export default ParametricSingleton;
19 |
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/Prototype.test.ts:
--------------------------------------------------------------------------------
1 | import { Warrior, Wizard, HeroPrototype } from "./Prototype";
2 |
3 | test("it creates a Wizard from a prototype", () => {
4 | const wiz = new Wizard("Theo");
5 | expect(wiz.clone()).toBeInstanceOf(Wizard);
6 | expect(JSON.stringify(wiz.clone())).toBe(
7 | '{"name":"Unknown","spells":[],"health":100}'
8 | );
9 | });
10 | test("it creates a Warrior from a prototype", () => {
11 | const war = new Warrior("Alex");
12 | expect(war.clone()).toBeInstanceOf(Warrior);
13 | expect(JSON.stringify(war.clone())).toBe(
14 | '{"name":"Alex","weapon":"Bare Hands","health":150}'
15 | );
16 | });
17 |
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/Prototype.ts:
--------------------------------------------------------------------------------
1 | export interface HeroPrototype {
2 | clone(): HeroPrototype;
3 | }
4 |
5 | export interface Spell {
6 | name: string;
7 | }
8 |
9 | export class Wizard implements HeroPrototype {
10 | private spells: Spell[];
11 | private health: number;
12 | constructor(private name: string) {
13 | this.spells = [];
14 | this.health = 100;
15 | }
16 |
17 | clone(): Wizard {
18 | const cloned = Object.create(Wizard.prototype || null);
19 | Object.getOwnPropertyNames(this).map((key: string) => {
20 | if (key === "name") {
21 | cloned[key] = "Unknown";
22 | } else {
23 | cloned[key] = this[key];
24 | }
25 | });
26 |
27 | return cloned;
28 | }
29 | }
30 |
31 | export class Warrior implements HeroPrototype {
32 | private weapon: string;
33 | private health: number;
34 | constructor(private name: string) {
35 | this.weapon = "Dagger";
36 | this.health = 150;
37 | }
38 |
39 | clone(): Warrior {
40 | const cloned = Object.create(Warrior.prototype || null);
41 | Object.getOwnPropertyNames(this).map((key: string) => {
42 | if (key === "weapon") {
43 | cloned[key] = "Bare Hands";
44 | } else {
45 | cloned[key] = this[key];
46 | }
47 | });
48 |
49 | return cloned;
50 | }
51 | }
52 |
53 | let wiz: HeroPrototype = new Wizard("Theo");
54 | let war: HeroPrototype = new Warrior("Mike");
55 | console.debug(wiz.clone());
56 | console.debug(war.clone());
57 |
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/ProxyBuilder.ts:
--------------------------------------------------------------------------------
1 | export type Builder = {
2 | [k in keyof T]-?: (arg: T[k]) => Builder;
3 | } & {
4 | build(): T;
5 | };
6 |
7 | export function ModelBuilder(): Builder {
8 | const built: Record = {};
9 | const builder = new Proxy(
10 | {},
11 | {
12 | get(target, prop) {
13 | if ("build" === prop) {
14 | return () => built;
15 | }
16 |
17 | return (x: unknown): unknown => {
18 | built[prop.toString()] = x;
19 | return builder;
20 | };
21 | },
22 | }
23 | );
24 |
25 | return builder as Builder;
26 | }
27 |
28 | interface UserInfo {
29 | id: number;
30 | userName: string;
31 | email: string;
32 | }
33 |
34 | const userInfo = ModelBuilder()
35 | .id(1)
36 | .userName("foo")
37 | .email("foo@bar.baz")
38 | .build();
39 |
40 | console.debug(userInfo);
41 |
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/UsersApiSingleton.ts:
--------------------------------------------------------------------------------
1 | export class UsersAPISingleton {
2 | private static instance: UsersAPISingleton;
3 | private constructor() {}
4 | static getInstance() {
5 | if (!UsersAPISingleton.instance) {
6 | UsersAPISingleton.instance = new UsersAPISingleton();
7 | }
8 |
9 | return UsersAPISingleton.instance;
10 | }
11 |
12 | getUsers(): Promise {
13 | return Promise.resolve(["Alex", "John", "Sarah"]);
14 | }
15 | }
16 |
17 | const usersPromise = UsersAPISingleton.getInstance().getUsers();
18 | usersPromise.then((res) => {
19 | console.log(res);
20 | });
21 |
22 | UsersAPISingleton.getInstance("/v1/users").getUsers();
23 | UsersAPISingleton.getInstance("/v2/users").getUsers();
24 |
25 | UsersAPISingleton.getInstance("/v1/users") ===
26 | UsersAPISingleton.getInstance("/v1/users");
27 | UsersAPISingleton.getInstance("/v1/users") !==
28 | UsersAPISingleton.getInstance("/v2/users");
29 |
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/WebsiteBuilder.test.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Website,
3 | PremiumWebsiteBuilder,
4 | WebsiteBuilder,
5 | } from "./WebsiteBuilder";
6 |
7 | let wb: WebsiteBuilder;
8 | beforeEach(() => {
9 | wb = new PremiumWebsiteBuilder();
10 | });
11 |
12 | test("PremiumWebsiteBuilder builds a premium website with the correct properties", () => {
13 | const website = wb
14 | .setName("example")
15 | .setHost("localhost")
16 | .setIsPremium(false)
17 | .setPort(3000)
18 | .build();
19 | expect(website.isPremium).toBeTruthy;
20 | expect(website.name).toBe("example");
21 | expect(website.host).toBe("localhost");
22 | expect(website.port).toBe(3000);
23 | });
24 |
25 | test("PremiumWebsiteBuilder order of steps does not have side effects", () => {
26 | const website = wb
27 | .setName("example")
28 | .setPort(3000)
29 | .setHost("localhost")
30 | .setIsPremium(false)
31 | .setName("example2")
32 | .build();
33 | expect(website.isPremium).toBeTruthy;
34 | expect(website.name).toBe("example2");
35 | expect(website.host).toBe("localhost");
36 | expect(website.port).toBe(3000);
37 | });
38 |
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/WebsiteBuilder.ts:
--------------------------------------------------------------------------------
1 | export class Website {
2 | constructor(
3 | public name?: string,
4 | public host?: string,
5 | public port?: number,
6 | public adminEmail?: string,
7 | public content?: string,
8 | public isPremium?: boolean
9 | ) {}
10 | }
11 |
12 | export interface WebsiteBuilder {
13 | setName(name: string): WebsiteBuilder;
14 | setHost(host: string): WebsiteBuilder;
15 | setPort(port: number): WebsiteBuilder;
16 | setAdminEmail(email: string): WebsiteBuilder;
17 | setContent(content: string): WebsiteBuilder;
18 | setIsPremium(isPremium: boolean): WebsiteBuilder;
19 | build(): Website;
20 | }
21 |
22 | export class PremiumWebsiteBuilder implements WebsiteBuilder {
23 | private website: Website;
24 | constructor() {
25 | this.website = new Website();
26 | this.clear();
27 | }
28 |
29 | setName(name: string): WebsiteBuilder {
30 | this.website.name = name;
31 | return this;
32 | }
33 |
34 | setHost(host: string): WebsiteBuilder {
35 | this.website.host = host;
36 | return this;
37 | }
38 |
39 | setPort(port: number): WebsiteBuilder {
40 | this.website.port = port;
41 | return this;
42 | }
43 |
44 | setAdminEmail(email: string): WebsiteBuilder {
45 | this.website.adminEmail = email;
46 | return this;
47 | }
48 |
49 | setContent(content: string): WebsiteBuilder {
50 | this.website.content = content;
51 | return this;
52 | }
53 |
54 | setIsPremium(): WebsiteBuilder {
55 | this.website.isPremium = true;
56 | return this;
57 | }
58 |
59 | build(): Website {
60 | const website = this.website;
61 | this.clear();
62 | return website;
63 | }
64 |
65 | clear(): void {
66 | this.website = new Website();
67 | this.website.isPremium = true;
68 | }
69 | }
70 |
71 | const wb = new PremiumWebsiteBuilder();
72 | wb.setName("example").setHost("localhost").setPort(3000);
73 |
74 | const website = wb.build();
75 |
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/singleton.test.ts:
--------------------------------------------------------------------------------
1 | import singleton from "./singleton";
2 |
3 | test("singleton is a Singleton", () => {
4 | expect(singleton.getInstance()).toBe(singleton.getInstance());
5 | });
6 |
--------------------------------------------------------------------------------
/chapters/chapter-3_Creational_Design_Patterns/singleton.ts:
--------------------------------------------------------------------------------
1 | export class Singleton {
2 | // Stores the singleton instance
3 | private static instance: Singleton;
4 | // Prevents creation of new instances
5 | private constructor() {}
6 | // Method to retrieve instance
7 | static getInstance() {
8 | if (!Singleton.instance) {
9 | Singleton.instance = new Singleton();
10 | }
11 | return Singleton.instance;
12 | }
13 | }
14 |
15 | export default Singleton;
16 |
--------------------------------------------------------------------------------
/chapters/chapter-4_Structural_Design_Patterns/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/TypeScript-4-Design-Patterns-and-Best-Practices/794888bd4c351b9565e01828440e3d0cf06d26c6/chapters/chapter-4_Structural_Design_Patterns/.gitkeep
--------------------------------------------------------------------------------
/chapters/chapter-4_Structural_Design_Patterns/Adapter.test.ts:
--------------------------------------------------------------------------------
1 | import { ActionSender, EventAdapter } from "./Adapter";
2 | import { mocked } from "ts-jest/utils";
3 | import { EventCreator } from "./EventCreator";
4 |
5 | jest.mock("./EventCreator", () => {
6 | return {
7 | EventCreator: jest.fn().mockImplementation(() => {
8 | return {
9 | sendEvent: jest.fn(),
10 | };
11 | }),
12 | };
13 | });
14 |
15 | describe("EventCreator", () => {
16 | const mockedEventCreator = mocked(EventCreator, true);
17 | beforeEach(() => {
18 | // Clears the record of calls to the mock constructor function and its methods
19 | mockedEventCreator.mockClear();
20 | });
21 |
22 | let ad: ActionSender;
23 | test("it calls the service function", () => {
24 | ad = new EventAdapter();
25 | ad.sendAction("action");
26 | expect(mockedEventCreator).toHaveBeenCalledTimes(1);
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/chapters/chapter-4_Structural_Design_Patterns/Adapter.ts:
--------------------------------------------------------------------------------
1 | import {EventCreator} from "./EventCreator";
2 |
3 | export interface ActionSender {
4 | sendAction(action: string): Promise;
5 | }
6 |
7 | export class ActionCreator implements ActionSender {
8 | sendAction(action: string): Promise {
9 | return new Promise((resolve, reject) => {
10 | console.log("Event Created: ", action);
11 | resolve();
12 | });
13 | }
14 | }
15 |
16 | export interface EventSender {
17 | sendEvent(eventName: string): void;
18 | }
19 |
20 | export class EventAdapter implements ActionSender {
21 | eventSender: EventSender;
22 | constructor(eventSender: EventSender = new EventCreator()) {
23 | this.eventSender = eventSender;
24 | }
25 | public async sendAction(action: string): Promise {
26 | await this.eventSender.sendEvent(action);
27 | }
28 | }
29 |
30 | export class Client {
31 | // @ts-ignore
32 | actionCreator: ActionSender;
33 | call() {
34 | this.actionCreator = new ActionCreator();
35 | this.actionCreator.sendAction("Hello");
36 | this.actionCreator = new EventAdapter(new EventCreator());
37 | this.actionCreator.sendAction("Another Action");
38 | }
39 | }
40 |
41 | new Client().call();
42 |
--------------------------------------------------------------------------------
/chapters/chapter-4_Structural_Design_Patterns/Bridge.ts:
--------------------------------------------------------------------------------
1 | interface Box {
2 | id: string;
3 | value: string;
4 | }
5 | interface BoxArranger {
6 | arrangeItem(item: Box, items: Box[]): Box[];
7 | }
8 |
9 | abstract class BoxContainer {
10 | constructor(public items: Box[] = [], protected boxArranger: BoxArranger) {}
11 | arrangeItem(item: Box) {}
12 | }
13 |
14 | class StraightBoxContainer extends BoxContainer {
15 | arrangeItem(item: Box) {
16 | this.items = this.boxArranger.arrangeItem(item, this.items);
17 | }
18 | }
19 |
20 | class ReversingBoxContainer extends BoxContainer {
21 | arrangeItem(item: Box) {
22 | this.items = this.boxArranger.arrangeItem(item, this.items).reverse();
23 | }
24 | }
25 |
26 | class PutLastBoxArranger implements BoxArranger {
27 | arrangeItem(item: Box, items: Box[]): Box[] {
28 | items = items.concat(item);
29 | return items;
30 | }
31 | }
32 |
33 | class PutFirstBoxArranger implements BoxArranger {
34 | arrangeItem(item: Box, items: Box[]): Box[] {
35 | let result = items.slice();
36 | result.unshift(item);
37 | return result;
38 | }
39 | }
40 | const items: Box[] = [
41 | {
42 | id: "1",
43 | value: "abc",
44 | },
45 | ];
46 | const pfa = new PutFirstBoxArranger();
47 | const pla = new PutLastBoxArranger();
48 | const rv = new StraightBoxContainer(items, pla);
49 | rv.arrangeItem({
50 | id: "3",
51 | value: "dfa",
52 | }); // [ { id: '3', value: 'dfa' }, { id: '1', value: 'abc' } ]
53 | console.log(rv.items);
54 | const sc = new StraightBoxContainer(items, pfa);
55 | sc.arrangeItem({
56 | id: "3",
57 | value: "dfa",
58 | });
59 | console.log(sc.items);
60 |
61 | // Implementor type
62 | interface StoreAPI {
63 | store(item: T);
64 | }
65 | // Abstraction type
66 | interface List {
67 | push(item: T): void;
68 | }
69 |
70 | class ArrayList implements List {
71 | constructor(private items: T[], private storeAPI: StoreAPI) {}
72 | push(item: T): void {
73 | this.storeAPI.store(item);
74 | }
75 | // implements methods of List
76 | }
77 | interface ListNode {
78 | data: T;
79 | next: ListNode | null;
80 | }
81 | class LinkedList implements List {
82 | constructor(private root: ListNode, private items: T[]) {}
83 | // implements methods of List
84 | push(item: T): void {
85 | const newNode: ListNode = {data: item, next: null};
86 | newNode.next = this.root;
87 | this.root = newNode;
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/chapters/chapter-4_Structural_Design_Patterns/Composite.ts:
--------------------------------------------------------------------------------
1 | interface UIElement {
2 | render(): string;
3 | }
4 |
5 | class WindowComposite implements UIElement {
6 | private children: UIElement[];
7 |
8 | constructor() {
9 | this.children = [];
10 | }
11 |
12 | render(): string {
13 | let result = "";
14 | for (let i = 0; i < this.children.length; i += 1) {
15 | result += this.children[i].render();
16 | }
17 | result += "";
18 | return result;
19 | }
20 | addComponent(c: UIElement): void {
21 | this.children.push(c);
22 | }
23 | removeComponent(idx: number): void {
24 | if (this.children.length <= idx) {
25 | throw new Error("index out of bound!");
26 | }
27 | this.children.splice(idx, 1);
28 | }
29 | }
30 |
31 | class Button implements UIElement {
32 | constructor(private text: string) {}
33 | render(): string {
34 | return ``;
35 | }
36 | }
37 | const wc: WindowComposite = new WindowComposite();
38 | wc.addComponent(new Button("Click me"));
39 | wc.addComponent(new Button("No Click me"));
40 | console.info(wc.render()); //
41 |
--------------------------------------------------------------------------------
/chapters/chapter-4_Structural_Design_Patterns/Decorator.test.ts:
--------------------------------------------------------------------------------
1 | import { LogEventDecorator, Event } from "./Decorator";
2 | const spy = jest.spyOn(console, "log").mockImplementation(() => {});
3 |
4 | afterEach(() => {
5 | spy.mockReset();
6 | });
7 |
8 | test("it calls the decorated object method", () => {
9 | const mockSendEvent = jest.fn();
10 | const mock = {
11 | send: mockSendEvent,
12 | };
13 | const log = new LogEventDecorator(mock);
14 | log.send("example");
15 | expect(mockSendEvent).toHaveBeenCalledWith("example");
16 | });
17 |
18 | test("it calls the decorator calls before and after the call to decorated method", () => {
19 | const mockSendEvent = jest.fn();
20 | const mock = {
21 | send: mockSendEvent,
22 | };
23 | const log = new LogEventDecorator(mock);
24 | log.send("example");
25 | expect(spy).toBeCalledTimes(2);
26 | });
27 |
--------------------------------------------------------------------------------
/chapters/chapter-4_Structural_Design_Patterns/Decorator.ts:
--------------------------------------------------------------------------------
1 | export interface Event {
2 | send(message: string): void;
3 | }
4 |
5 | export class SendEmailEvent implements Event {
6 | public send(message: string): void {
7 | // send event using email client
8 | console.log("Currently sending event message", message);
9 | }
10 | }
11 |
12 | export class LogEventDecorator implements Event {
13 | constructor(private event: Event) {
14 | this.event = event;
15 | }
16 |
17 | public send(message: string): void {
18 | console.log("Before sending event message", message);
19 | this.event.send(message); // forward call to event
20 | console.log("After sending event message: ", message);
21 | }
22 | }
23 |
24 | const sendEmail: Event = new SendEmailEvent();
25 | const logSendEmail = new LogEventDecorator(sendEmail);
26 | logSendEmail.send("Hi!");
27 |
28 | function logCall(
29 | target: any,
30 | propertyKey: string,
31 | descriptor: PropertyDescriptor
32 | ) {}
33 |
34 | function LogCall() {
35 | return function (
36 | target: Object,
37 | key: string | symbol,
38 | descriptor: PropertyDescriptor
39 | ) {
40 | const caller = descriptor.value;
41 | descriptor.value = (message: string) => {
42 | console.log("Before sending event message", message);
43 | // @ts-ignore
44 | caller.apply(this, [message]);
45 | console.log("After sending event message", message);
46 | return caller;
47 | };
48 | return descriptor;
49 | };
50 | }
51 |
52 | class EventService {
53 | @LogCall()
54 | createEvent(message: string): void {
55 | console.log("Currently sending event message", message);
56 | }
57 | }
58 |
59 | new EventService().createEvent("Message");
60 |
--------------------------------------------------------------------------------
/chapters/chapter-4_Structural_Design_Patterns/EventCreator.ts:
--------------------------------------------------------------------------------
1 | import {EventSender} from "./Adapter";
2 |
3 | export class EventCreator implements EventSender {
4 | sendEvent(action: string): void {
5 | console.log("Event Created: ", action);
6 | }
7 | }
--------------------------------------------------------------------------------
/chapters/chapter-4_Structural_Design_Patterns/Facade.ts:
--------------------------------------------------------------------------------
1 | class Facade {
2 | constructor(private serviceA: ServiceA, private serviceB: ServiceB) {}
3 |
4 | perform() {
5 | this.serviceA.action();
6 | this.serviceB.action();
7 | // more complex logic here
8 | }
9 | }
10 | interface ServiceA {
11 | action(): void;
12 | }
13 | interface ServiceB {
14 | action(): void;
15 | }
16 |
17 | class ServiceAImpl implements ServiceA {
18 | action(): void {
19 | console.log("Performing action on Service A");
20 | }
21 | }
22 |
23 | class ServiceBImpl implements ServiceB {
24 | action(): void {
25 | console.log("Performing action on Service B");
26 | }
27 | }
28 |
29 | new Facade(new ServiceAImpl(), new ServiceBImpl()).perform();
30 |
--------------------------------------------------------------------------------
/chapters/chapter-4_Structural_Design_Patterns/FacadeExample.ts:
--------------------------------------------------------------------------------
1 | class DocumentService {
2 | create(name: string): Promise {
3 | return Promise.resolve(`Location: /documents/${name}`);
4 | }
5 | }
6 | interface ApiClient {
7 | upload(url: string, blob: Blob): Promise;
8 | }
9 |
10 | class UploadService {
11 | constructor(private client: ApiClient) {}
12 | upload(url: string, blob: Blob): Promise {
13 | return this.client.upload(url, blob);
14 | }
15 | }
16 | class DocumentUploadFacade {
17 | constructor(
18 | private documentService: DocumentService,
19 | private uploadService: UploadService
20 | ) {}
21 |
22 | async createAndUploadDocument(name: string, blob: Blob): Promise {
23 | let path: string | null = null;
24 | let status = false;
25 | try {
26 | path = await this.documentService.create(name);
27 | } catch (e) {
28 | console.error(e);
29 | }
30 | if (path) {
31 | try {
32 | status = await this.uploadService.upload(path, blob);
33 | } catch (e) {
34 | console.error(e);
35 | }
36 | }
37 |
38 | return status;
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/chapters/chapter-4_Structural_Design_Patterns/Flyweight.ts:
--------------------------------------------------------------------------------
1 | export interface Flyweight {
2 | perform(customization: { id: string }): void;
3 | }
4 |
5 | export class ConcreteFlyweight implements Flyweight {
6 | constructor(private sharedState: Object) {}
7 |
8 | public perform(customization: { id: string }): void {
9 | console.log(
10 | `Call to ConcreteFlyweight with param: ${customization.id} called`
11 | );
12 | }
13 | }
14 |
15 | export class FlyweightFactory {
16 | private cache = new Map();
17 | public create(sharedState: Object): Flyweight {
18 | if (!this.cache.has(sharedState)) {
19 | this.cache.set(sharedState, new ConcreteFlyweight(sharedState));
20 | }
21 | return this.cache.get(sharedState)!;
22 | }
23 | }
24 |
25 | new FlyweightFactory().create({ state: "Initial" }).perform({ id: "abc" });
26 |
--------------------------------------------------------------------------------
/chapters/chapter-4_Structural_Design_Patterns/Proxy.es6.ts:
--------------------------------------------------------------------------------
1 | const textStore = {
2 | save(data: string): void {
3 | console.log(`Called 'save' from TextStore with data=${data}`);
4 | },
5 | };
6 |
7 | const proxyTextStore = new Proxy(textStore, {
8 | apply: function (target, that, args) {
9 | console.log(`Called 'save' from ProxyTextStore with data=${args}`);
10 | target.save(args[0]);
11 | },
12 | });
13 | proxyTextStore.save("Data");
14 |
--------------------------------------------------------------------------------
/chapters/chapter-4_Structural_Design_Patterns/Proxy.ts:
--------------------------------------------------------------------------------
1 | export interface Store {
2 | save(data: string): void;
3 | }
4 |
5 | export class TextStore implements Store {
6 | save(data: string): void {
7 | console.log(`Called 'save' from TextStore with data=${data}`);
8 | }
9 | }
10 |
11 | export class ProxyTextStore implements Store {
12 | constructor(private textStore?: TextStore) {}
13 | save(data: string): void {
14 | console.log(`Called 'save' from ProxyTextStore with data=${data}`);
15 | if (!this.textStore) {
16 | console.log("Lazy init: textStore.");
17 | this.textStore = new TextStore();
18 | }
19 | this.textStore.save(data);
20 | }
21 | }
22 |
23 | new ProxyTextStore().save("Data");
24 | //Called 'save' from ProxyTextStore with data=Data
25 | //Lazy init: textStore.
26 | //Called 'save' from TextStore with data=Data
27 |
--------------------------------------------------------------------------------
/chapters/chapter-5_Behavioral_Design_Patterns/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/TypeScript-4-Design-Patterns-and-Best-Practices/794888bd4c351b9565e01828440e3d0cf06d26c6/chapters/chapter-5_Behavioral_Design_Patterns/.gitkeep
--------------------------------------------------------------------------------
/chapters/chapter-5_Behavioral_Design_Patterns/ChainOfResponsibility.test.ts:
--------------------------------------------------------------------------------
1 | import { HTTPRequest, LogRequestHandler } from "./ChainOfResponsibility";
2 | const spy = jest.spyOn(console, "log").mockImplementation();
3 | afterAll(() => {
4 | spy.mockRestore();
5 | });
6 |
7 | test("HTTPRequest", () => {
8 | const req = new HTTPRequest("localhost", new Map().set("q", "searchTerm"));
9 | expect(req.getOrigin()).toBe("localhost");
10 | expect(req.getParams()).toEqual(new Map().set("q", "searchTerm"));
11 | });
12 |
13 | test("LogRequestHandler", () => {
14 | const req = new HTTPRequest("localhost", new Map().set("q", "searchTerm"));
15 | const requestHandler = new LogRequestHandler(null);
16 | requestHandler.handleRequest(req);
17 | expect(spy).toHaveBeenCalledTimes(1);
18 | });
19 |
--------------------------------------------------------------------------------
/chapters/chapter-5_Behavioral_Design_Patterns/ChainOfResponsibility.ts:
--------------------------------------------------------------------------------
1 | export interface IRequest {
2 | getOrigin(): string;
3 | getParams(): Map;
4 | }
5 |
6 | export class HTTPRequest implements IRequest {
7 | constructor(private origin: string, private params: Map) {}
8 | getOrigin(): string {
9 | return this.origin;
10 | }
11 | getParams(): Map {
12 | return this.params;
13 | }
14 | }
15 |
16 | export abstract class RequestHandler {
17 | constructor(protected next: RequestHandler | null) {}
18 |
19 | handleRequest(request: IRequest) {
20 | if (this.next !== null) {
21 | this.next.handleRequest(request);
22 | }
23 | }
24 | }
25 | export class LogRequestHandler extends RequestHandler {
26 | handleRequest(request: IRequest) {
27 | console.log(
28 | `Request with origin: ${request.getOrigin()} handled by LogRequestHandler`
29 | );
30 | if (this.next !== null) {
31 | this.next.handleRequest(request);
32 | }
33 | }
34 | }
35 | export class EmailRequestHandler extends RequestHandler {
36 | handleRequest(request: IRequest) {
37 | console.log(
38 | `Request with origin: ${request.getOrigin()} handled by EmailRequestHandler`
39 | );
40 | if (this.next !== null) {
41 | this.next.handleRequest(request);
42 | }
43 | }
44 | }
45 | const req = new HTTPRequest("localhost", new Map().set("q", "searchTerm"));
46 | new LogRequestHandler(new EmailRequestHandler(null)).handleRequest(req); //
47 | // Request with origin: localhost handled by LogRequestHandler
48 | // Request with origin: localhost handled by EmailRequestHandler
49 |
--------------------------------------------------------------------------------
/chapters/chapter-5_Behavioral_Design_Patterns/Command.ts:
--------------------------------------------------------------------------------
1 | interface Command {
2 | execute();
3 | }
4 | interface Receiver {
5 | methodA();
6 | methodB();
7 | }
8 | class ConcreteCommandA implements Command {
9 | constructor(private receiver: Receiver) {}
10 |
11 | execute() {
12 | this.receiver.methodA();
13 | }
14 | }
15 | class ConcreteCommandB implements Command {
16 | constructor(private receiver: Receiver) {}
17 |
18 | execute() {
19 | this.receiver.methodB();
20 | }
21 | }
22 |
23 | interface CommandHandler {
24 | handle(command: Command);
25 | }
26 |
27 | class ConcreteCommandHandler implements CommandHandler {
28 | private commands: Command[] = [];
29 | handle(command: Command) {
30 | command.execute();
31 | this.commands.push(command);
32 | }
33 | }
34 |
35 | class ConcreteReceiver implements Receiver {
36 | methodA() {
37 | console.log("Called method A");
38 | }
39 | methodB() {
40 | console.log("Called method B");
41 | }
42 | }
43 |
44 | const handler = new ConcreteCommandHandler();
45 | const receiver = new ConcreteReceiver();
46 | handler.handle(new ConcreteCommandA(receiver)); // logs Called method A
47 | handler.handle(new ConcreteCommandB(receiver)); // logs Called method B
48 |
--------------------------------------------------------------------------------
/chapters/chapter-5_Behavioral_Design_Patterns/Iterator.ts:
--------------------------------------------------------------------------------
1 | export interface Iterator {
2 | next(): T | null;
3 | hasNext(): boolean;
4 | }
5 | class ListNode {
6 | constructor(public next: ListNode | null, public data: T) {}
7 | }
8 | class ListIterator implements Iterator {
9 | constructor(private root: ListNode | null) {}
10 | next(): T | null {
11 | if (this.hasNext()) {
12 | const data = this.root!.data;
13 | this.root = this.root!.next;
14 | return data;
15 | }
16 | return null;
17 | }
18 | hasNext(): boolean {
19 | return this.root !== null;
20 | }
21 | }
22 |
23 | class ListAggregate {
24 | constructor(private rootList: ListNode) {}
25 |
26 | getListIterator(): ListIterator {
27 | return new ListIterator(this.rootList);
28 | }
29 | }
30 | const list = new ListNode(new ListNode(new ListNode(null, 10), 5), 15);
31 | const aggregate = new ListAggregate(list);
32 | const iterator = aggregate.getListIterator();
33 | while (iterator.hasNext()) {
34 | console.log(iterator.next()); // prints 15, 5, 10
35 | }
36 | class OnlyA implements Iterable {
37 | constructor(private limit: number = 3) {}
38 |
39 | [Symbol.iterator]() {
40 | let limit = this.limit;
41 |
42 | return {
43 | next(): IteratorResult {
44 | return {
45 | done: limit-- === 0,
46 | value: "A",
47 | };
48 | },
49 | };
50 | }
51 | }
52 | const a = new OnlyA();
53 | for (let i of a) {
54 | console.log(i);
55 | }
56 |
--------------------------------------------------------------------------------
/chapters/chapter-5_Behavioral_Design_Patterns/Mediator.ts:
--------------------------------------------------------------------------------
1 | interface WorkerMediator {
2 | triggerEvent(sender: object, message: string): void;
3 | }
4 |
5 | class WorkerCenter implements WorkerMediator {
6 | constructor(
7 | protected workerA: BatchWorker,
8 | protected workerB: SingleTaskWorker
9 | ) {
10 | this.workerA.setMediator(this);
11 | this.workerB.setMediator(this);
12 | }
13 |
14 | public triggerEvent(sender: object, message: string): void {
15 | // Triggers stack overflow error
16 | // if (message.startsWith("single_job_completed")) {
17 | // this.workerB.performWork();
18 | // }
19 |
20 | if (message.startsWith("batch_job_completed")) {
21 | this.workerB.performWork();
22 | }
23 | }
24 | }
25 |
26 | abstract class Workhorse {
27 | protected mediator: WorkerMediator | undefined;
28 | constructor(mediator?: WorkerMediator) {
29 | this.mediator = mediator;
30 | }
31 |
32 | setMediator(mediator: WorkerMediator): void {
33 | this.mediator = mediator;
34 | }
35 | }
36 |
37 | class BatchWorker extends Workhorse {
38 | public performWork(): void {
39 | console.log("Performing work in BatchWorker");
40 | if (this.mediator) {
41 | this.mediator.triggerEvent(this, "batch_job_completed");
42 | }
43 | }
44 |
45 | public finalize(): void {
46 | console.log("Performing final work in BatchWorker");
47 | if (this.mediator) {
48 | this.mediator.triggerEvent(this, "final_job_completed");
49 | }
50 | }
51 | }
52 |
53 | class SingleTaskWorker extends Workhorse {
54 | public performWork(): void {
55 | console.log("Performing work in SingleTaskWorker");
56 | if (this.mediator) {
57 | this.mediator.triggerEvent(this, "single_job_completed");
58 | }
59 | }
60 | }
61 |
62 | const workerA = new BatchWorker();
63 | const workerB = new SingleTaskWorker();
64 | const mediator = new WorkerCenter(workerA, workerB);
65 |
66 | workerA.performWork();
67 |
--------------------------------------------------------------------------------
/chapters/chapter-5_Behavioral_Design_Patterns/Memento.ts:
--------------------------------------------------------------------------------
1 | interface AppState {
2 | data: any;
3 | }
4 |
5 | abstract class Memento {
6 | constructor(protected state: AppState) {}
7 | getState(): AppState {
8 | return this.state;
9 | }
10 | }
11 |
12 | class ConcreteMemento extends Memento {
13 | getState(): AppState {
14 | return super.getState();
15 | }
16 | }
17 |
18 | class Originator {
19 | constructor(private state: AppState) {}
20 | save(): Memento {
21 | return new ConcreteMemento(this.state);
22 | }
23 | restore(memento: Memento): void {
24 | this.state = memento.getState();
25 | }
26 | }
27 |
28 | export class CareTaker {
29 | constructor(
30 | private originator: Originator,
31 | private mementos: Memento[] = []
32 | ) {}
33 |
34 | restoreLastMemento() {
35 | if (this.mementos.length === 0) {
36 | return;
37 | }
38 | const memento = this.mementos.pop()!;
39 | this.originator.restore(memento);
40 | }
41 |
42 | saveMemento() {
43 | this.mementos.push(this.originator.save());
44 | }
45 | }
46 | const state: AppState = {
47 | data: "paste data",
48 | };
49 | const originator = new Originator(state);
50 | const caretaker = new CareTaker(originator);
51 | console.log("Originator data:", originator.save().getState().data); // Originator data: paste data
52 |
53 | state.data = "many more data";
54 | caretaker.saveMemento();
55 | caretaker.restoreLastMemento();
56 | console.log("Restored data:", originator.save().getState().data); // Restored data: many more data
57 |
58 | // interface EditorState {}
59 | // class Editor {
60 | // constructor(private state: EditorState) {}
61 | // public save(): Revision {
62 | // return new Revision(this.state);
63 | // }
64 | // public restore(revision: Revision): void {
65 | // this.state = revision.getState();
66 | // }
67 | // }
68 |
69 | // class Revision {
70 | // constructor(private state: EditorState) {}
71 | // }
72 |
73 | // class RevisionList {
74 | // private revisions: Revision[] = [];
75 | // constructor(private editor: Editor) {}
76 | // }
77 |
--------------------------------------------------------------------------------
/chapters/chapter-5_Behavioral_Design_Patterns/Observer.ts:
--------------------------------------------------------------------------------
1 | export interface Subscriber {
2 | notify(): void;
3 | }
4 |
5 | export abstract class Subject {
6 | private subscribers: Subscriber[] = [];
7 |
8 | public addSubscriber(s: Subscriber): void {
9 | this.subscribers.push(s);
10 | }
11 |
12 | public removeSubscriber(s: Subscriber): void {
13 | var n: number = this.subscribers.indexOf(s);
14 | this.subscribers.splice(n, 1);
15 | }
16 |
17 | public notify(): void {
18 | console.log("notifying all the subscriber list");
19 | for (let s of this.subscribers) {
20 | s.notify();
21 | }
22 | }
23 | }
24 |
25 | export class ConcreteSubject extends Subject {
26 | private state: any;
27 |
28 | getState(): any {
29 | return this.state;
30 | }
31 |
32 | setState(state: any) {
33 | this.state = state;
34 | }
35 | }
36 |
37 | export class ConcreteSubscriber implements Subscriber {
38 | private state: any;
39 |
40 | constructor(private subject: ConcreteSubject) {}
41 |
42 | public notify(): void {
43 | this.state = this.subject.getState();
44 | console.log(
45 | "ConcreteSubscriber: Received notify method from subject state",
46 | this.state
47 | );
48 | }
49 |
50 | getSubject(): ConcreteSubject {
51 | return this.subject;
52 | }
53 |
54 | setSubject(subject: ConcreteSubject) {
55 | this.subject = subject;
56 | }
57 | }
58 |
59 | const subject = new ConcreteSubject();
60 | const subA = new ConcreteSubscriber(subject);
61 | subject.addSubscriber(subA);
62 |
63 | const subB = new ConcreteSubscriber(subject);
64 | subject.addSubscriber(subB);
65 |
66 | subject.setState(19);
67 | subject.notify();
68 |
--------------------------------------------------------------------------------
/chapters/chapter-5_Behavioral_Design_Patterns/State.test.ts:
--------------------------------------------------------------------------------
1 | import { Originator, PassiveState, ActiveState } from "./State";
2 | const spy = jest.spyOn(console, "log").mockImplementation();
3 | afterAll(() => {
4 | spy.mockRestore();
5 | });
6 |
7 | test("Originator state is Passive by default", () => {
8 | const origin = new Originator();
9 | origin.reportState();
10 |
11 | expect(spy).toHaveBeenCalledWith("Originator is in passive mode currently");
12 | });
13 |
14 | test("Originator state can transition to a new state", () => {
15 | const origin = new Originator();
16 | const newState = new ActiveState();
17 | origin.changeState(newState);
18 | origin.reportState();
19 |
20 | expect(spy).toHaveBeenCalledWith("Originator is in active mode currently");
21 | });
22 |
--------------------------------------------------------------------------------
/chapters/chapter-5_Behavioral_Design_Patterns/State.ts:
--------------------------------------------------------------------------------
1 | interface State {
2 | onEnterState(): void;
3 | reportState(): void;
4 | data: any;
5 | }
6 |
7 | export class PassiveState implements State {
8 | data: any;
9 | constructor() {
10 | this.data = "Passive data";
11 | }
12 |
13 | reportState(): void {
14 | console.log("Originator is in passive mode currently");
15 | }
16 |
17 | onEnterState(): void {
18 | console.log("Originator changed into passing mode");
19 | }
20 | }
21 |
22 | export class ActiveState implements State {
23 | data: any;
24 | constructor() {
25 | this.data = "Active data";
26 | }
27 |
28 | reportState(): void {
29 | console.log("Originator is in active mode currently");
30 | }
31 |
32 | onEnterState(): void {
33 | console.log("Originator changed into active mode");
34 | }
35 | }
36 |
37 | export class Originator {
38 | private state: State;
39 | constructor() {
40 | this.state = new PassiveState();
41 | }
42 |
43 | changeState(state: State): void {
44 | this.state = state;
45 | this.state.onEnterState();
46 | }
47 |
48 | reportState(): void {
49 | this.state.reportState();
50 | }
51 | }
52 | // const originator = new Originator();
53 | // originator.reportState(); // Originator is in passive mode currently
54 |
55 | // originator.changeState(new ActiveState()); // Originator changed into active mode
56 | // originator.reportState(); // Originator is in active mode currently
57 |
--------------------------------------------------------------------------------
/chapters/chapter-5_Behavioral_Design_Patterns/StateButton.ts:
--------------------------------------------------------------------------------
1 | interface ButtonState {
2 | status: "loading" | "disabled" | "active";
3 | text: string;
4 | icon: string;
5 | }
6 |
7 | class ActiveButtonState implements ButtonState {
8 | status: ButtonState["status"] = "active";
9 | text = "Click me";
10 | icon = "click_me_icon";
11 | constructor(private originator: Button) {}
12 | }
13 |
14 | export class Button {
15 | private state: ButtonState;
16 |
17 | constructor() {
18 | this.state = new ActiveButtonState(this);
19 | }
20 |
21 | changeState(state: ButtonState) {
22 | this.state = state;
23 | }
24 |
25 | render(): string {
26 | const { text, icon, status } = this.state;
27 | let disabled = false;
28 | if (status === "loading") {
29 | disabled = true;
30 | }
31 | return ``;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/chapters/chapter-5_Behavioral_Design_Patterns/Strategy.ts:
--------------------------------------------------------------------------------
1 | interface BillingStrategy {
2 | calculate(): void;
3 | }
4 |
5 | class ConcreteBillingStrategyA implements BillingStrategy {
6 | calculate(): void {
7 | console.log("Calculating bill using first strategy");
8 | }
9 | }
10 |
11 | class ConcreteBillingStrategyB implements BillingStrategy {
12 | calculate(): void {
13 | console.log("Calculating bill using second strategy");
14 | }
15 | }
16 |
17 | class BillingContext {
18 | constructor(private strategy: BillingStrategy) {}
19 |
20 | setStrategy(strategy: BillingStrategy) {
21 | this.strategy = strategy;
22 | }
23 |
24 | calculateBill(): void {
25 | this.strategy.calculate();
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/chapters/chapter-5_Behavioral_Design_Patterns/TemplateMethod.ts:
--------------------------------------------------------------------------------
1 | abstract class ShippingItemsTemplate {
2 | shipItems(items: string[]): void {
3 | this.prepareItems(items);
4 | this.performShipment(items);
5 | this.onItemsShipped(items);
6 | }
7 | protected prepareItems(items: string[]): void {
8 | console.log("Preparing items to be shipped to destination");
9 | }
10 | protected abstract performShipment(items: string[]): void;
11 | protected onItemsShipped(items: string[]): void {}
12 | }
13 |
14 | class AirShipment extends ShippingItemsTemplate {
15 | protected performShipment(): void {
16 | console.log("Shipping items by Air");
17 | }
18 | protected onItemsShipped(items: string[]): void {
19 | console.log("Items shipped by Air. Expect quick arrival.");
20 | }
21 | }
22 |
23 | class LandShipment extends ShippingItemsTemplate {
24 | protected performShipment(items: string[]): void {
25 | console.log("Shipping items by land");
26 | }
27 | protected onItemsShipped(items: string[]): void {
28 | console.log("Items shipped by land. Expect slow arrival.");
29 | }
30 | }
31 |
32 | const airShipment: ShippingItemsTemplate = new AirShipment();
33 | const landShipment: ShippingItemsTemplate = new LandShipment();
34 | airShipment.shipItems(["Chips", "Motherboards"]);
35 | landShipment.shipItems(["Chips", "Motherboards"]);
36 |
--------------------------------------------------------------------------------
/chapters/chapter-5_Behavioral_Design_Patterns/Visitor.ts:
--------------------------------------------------------------------------------
1 | export interface DocumentVisitor {
2 | visitConcreteDocumentA(concreteDocumentA: ConcreteDocumentA): void;
3 | visitConcreteDocumentB(concreteDocumentB: ConcreteDocumentB): void;
4 | }
5 | export interface AcceptsVisitor {
6 | accept(visitor: DocumentVisitor): void;
7 | }
8 | export class ConcreteDocumentA implements AcceptsVisitor {
9 | accept(visitor: DocumentVisitor): void {
10 | visitor.visitConcreteDocumentA(this);
11 | }
12 | }
13 | export class ConcreteDocumentB implements AcceptsVisitor {
14 | accept(visitor: DocumentVisitor): void {
15 | visitor.visitConcreteDocumentB(this);
16 | }
17 | }
18 | export class ConcreteDocumentVisitor implements DocumentVisitor {
19 | visitConcreteDocumentA(concreteDocumentA: ConcreteDocumentA): void {
20 | console.log("ConcreteDocumentVisitor visits ConcreteDocumentA");
21 | }
22 |
23 | visitConcreteDocumentB(concreteDocumentB: ConcreteDocumentB): void {
24 | console.log("ConcreteDocumentVisitor visits ConcreteDocumentB");
25 | }
26 | }
27 | export class CompositeDocument implements AcceptsVisitor {
28 | private documents: AcceptsVisitor[] = [];
29 |
30 | public addDocument(d: AcceptsVisitor): void {
31 | this.documents.push(d);
32 | }
33 | public accept(visitor: DocumentVisitor): void {
34 | for (let document of this.documents) {
35 | document.accept(visitor);
36 | }
37 | }
38 | }
39 |
40 | const composite = new CompositeDocument();
41 | const visitor = new ConcreteDocumentVisitor();
42 | composite.addDocument(new ConcreteDocumentA());
43 | composite.addDocument(new ConcreteDocumentB());
44 | composite.accept(visitor);
45 |
--------------------------------------------------------------------------------
/chapters/chapter-6_Functional_Programming_Concepts/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/TypeScript-4-Design-Patterns-and-Best-Practices/794888bd4c351b9565e01828440e3d0cf06d26c6/chapters/chapter-6_Functional_Programming_Concepts/.gitkeep
--------------------------------------------------------------------------------
/chapters/chapter-6_Functional_Programming_Concepts/FirstClassCitizens.ts:
--------------------------------------------------------------------------------
1 | const mod = function (a: number, b: number): number {
2 | return a % b;
3 | };
4 |
5 | function calculateMod(
6 | a: number,
7 | b: number,
8 | modFun: (a: number, b: number) => number
9 | ): number {
10 | return modFun(a, b);
11 | }
12 | console.log(calculateMod(10, 3, mod)); // 1
13 |
14 | function mulByTwo(a: number): () => number {
15 | return () => {
16 | return a * 2;
17 | };
18 | }
19 |
20 | mulByTwo(4)(); // 8
21 |
--------------------------------------------------------------------------------
/chapters/chapter-6_Functional_Programming_Concepts/FunctionComposition.ts:
--------------------------------------------------------------------------------
1 | import * as R from "ramda";
2 |
3 | function toLowerCase(input: string): string {
4 | return input.toLocaleLowerCase();
5 | }
6 |
7 | function substring(input: string, index: number): string {
8 | return input.substr(0, index);
9 | }
10 |
11 | function partitionAt(input: string, index: number): [string, string?] {
12 | if (index < 0 || index > input.length) {
13 | return [input];
14 | }
15 | return [input.substr(0, index), input.substr(index)];
16 | }
17 |
18 | console.log(partitionAt(toLowerCase("aAJu234AA*AUHF"), 4));
19 | // toLowerCase(partitionAt("aAJu234AA*AUHF"), 4) // return type does not match with input type
20 |
21 | const add = (a: number, b: number) => a + b;
22 | // const add = (a: number) => (b: number) => a + b;
23 |
24 | const addTwoNumbers = (a: number, b: number) => a + b;
25 |
26 | const addTwoNumbersC = R.curry(addTwoNumbers);
27 | const f = addTwoNumbersC(4);
28 | console.log(f(3)); //7
29 |
30 | const message = R.compose(toLowerCase, substring);
31 |
32 | console.log(message("aAJu234AA*AUHF", 4));
33 |
34 | function sortList(list: number[]): number[] {
35 | list.sort();
36 | return list;
37 | }
38 | let list = [42, 1, 4, 5];
39 | let l = [...sortList(list)];
40 | let m = [...list];
41 | console.log(l);
42 | console.log(m);
43 |
--------------------------------------------------------------------------------
/chapters/chapter-6_Functional_Programming_Concepts/Immutability.ts:
--------------------------------------------------------------------------------
1 | interface BlogPost {
2 | title: string;
3 | tags: string[];
4 | }
5 |
6 | //post.title = "Welcome to Javascript";
7 |
8 | /*
9 | {
10 | title: 'Welcome to Typescript',
11 | tags: [ 'typescript', 'learning', 'example' ]
12 | }
13 | */
14 |
15 | type Primitive = undefined | null | boolean | string | number | Function;
16 | export type DeepReadonly = T extends Primitive
17 | ? T
18 | : T extends Array
19 | ? ImmutableArray
20 | : T extends Map
21 | ? ImmutableMap
22 | : T extends Set
23 | ? ImmutableSet
24 | : ImmutableObject;
25 |
26 | export type ImmutableArray = ReadonlyArray>;
27 | export type ImmutableMap = ReadonlyMap, DeepReadonly>;
28 | export type ImmutableSet = ReadonlySet>;
29 | export type ImmutableObject = {
30 | readonly [K in keyof T]: DeepReadonly;
31 | };
32 |
33 | const post: DeepReadonly = {
34 | title: "Welcome to Typescript",
35 | tags: ["typescript", "learning"],
36 | };
37 |
38 | (post.tags as string[]).push("demo"); // works
39 |
40 | import { List } from "immutable";
41 |
42 | interface ImmutableBlogPost {
43 | title: string;
44 | tags: List;
45 | }
46 |
47 | const anotherPost: ImmutableBlogPost = {
48 | title: "Welcome to Typescript",
49 | tags: List(["typescript", "learning"]),
50 | };
51 | (anotherPost.tags as any).push("demo");
52 | console.log(anotherPost.tags.toArray()); // [ 'typescript', 'learning' ]
53 |
--------------------------------------------------------------------------------
/chapters/chapter-6_Functional_Programming_Concepts/Lens.ts:
--------------------------------------------------------------------------------
1 | export interface Lens {
2 | get: (obj: T) => A;
3 | set: (obj: T) => (newValue: A) => T;
4 | }
5 | function lensProp(key: string): Lens {
6 | return {
7 | get: (obj: T): A => obj[key],
8 | set:
9 | (obj: T) =>
10 | (value: A): T => ({ ...obj, [key]: value }),
11 | };
12 | }
13 |
14 | interface User {
15 | name: string;
16 | email: string;
17 | address: {
18 | street: string;
19 | number: string;
20 | city: string;
21 | country: string;
22 | };
23 | }
24 |
25 | const nameLens: Lens = lensProp("name");
26 | const user: User = {
27 | name: "Theo",
28 | email: "theo@example.com",
29 | address: {
30 | street: "Pembroke ST",
31 | number: "22",
32 | city: "Dublin",
33 | country: "Ireland",
34 | },
35 | };
36 | console.log(nameLens.get(user)); // Theo
37 | console.log(nameLens.set(user)("Alex"));
38 | console.log(nameLens.get(user)); // Theo
39 |
40 | function view(lens: Lens, obj: T): A {
41 | return lens.get(obj);
42 | }
43 |
44 | function set(lens: Lens, obj: T, value: A): T {
45 | return lens.set(obj)(value);
46 | }
47 |
48 | function over(lens: Lens, f: (x: A) => A, obj: T) {
49 | return lens.set(obj)(f(lens.get(obj)));
50 | }
51 |
52 | const prefixedName: User = over(
53 | nameLens,
54 | (name: string) => `Mr. ${name}`,
55 | user
56 | );
57 | console.log(view(nameLens, prefixedName)); // Mr. Theo
58 |
59 | interface TodoItem {
60 | id: string;
61 | title: string;
62 | completed: boolean;
63 | }
64 | interface TodoListState {
65 | allItemIds: string[];
66 | byItemId: { id: string; item: TodoItem };
67 | }
68 |
69 | interface UpdateTodoItemCompletedAction {
70 | type: "UPDATE_TODO_ITEM_COMPLETED";
71 | id: string;
72 | completed: boolean;
73 | }
74 | function reduceState(
75 | currentState: TodoListState,
76 | action: UpdateTodoItemCompletedAction
77 | ): TodoListState {
78 | switch (action.type) {
79 | case "UPDATE_TODO_ITEM_COMPLETED":
80 | return {
81 | ...currentState,
82 | byItemId: {
83 | ...currentState.byItemId,
84 | [action.id]: {
85 | ...currentState.byItemId[action.id],
86 | completed: action.completed,
87 | },
88 | },
89 | };
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/chapters/chapter-6_Functional_Programming_Concepts/Monad.ts:
--------------------------------------------------------------------------------
1 | import { pipe, flatten } from "ramda";
2 | import * as A from "fp-ts/ReadonlyArray";
3 | import { pipe as p, flow } from "fp-ts/function";
4 | import * as O from "fp-ts/Option";
5 | import { some } from "fp-ts/lib/ReadonlyRecord";
6 |
7 | function add2(x: number): number {
8 | return x + 2;
9 | }
10 |
11 | function mul3(x: number): number {
12 | return x * 3;
13 | }
14 |
15 | console.log(mul3(add2(2))); // (2 + 2) * 3 = 12
16 | console.log(add2(mul3(2))); // (2 * 3) + 2 = 8
17 |
18 | type Optional = Some | None;
19 | type None = {
20 | isEmpty(): true;
21 | map(f: (value: null) => U): None;
22 | flatMap(f: (value: null) => Optional): None;
23 | };
24 | type Some = {
25 | get(): T;
26 | isEmpty(): false;
27 | map(f: (value: T) => null): None;
28 | map(f: (value: T) => U): Some;
29 | map(f: (value: T) => U): Optional;
30 |
31 | flatMap(f: (value: T) => Some): Some;
32 | flatMap(f: (value: T) => None): None;
33 | flatMap(f: (value: T) => Optional): Optional;
34 | };
35 | const None: None = {
36 | isEmpty: () => true,
37 | map: (f: (value: never) => T) => None,
38 | flatMap: (f: (value: never) => Optional) => None,
39 | };
40 |
41 | function Some(value: T): Some {
42 | return {
43 | get: () => value,
44 | isEmpty: () => false,
45 | map: (f: (value: T) => U) => Optional(f(value)) as any,
46 | flatMap: (f: (value: T) => Optional) => f(value) as any,
47 | };
48 | }
49 | function Optional(value: T): Some;
50 | function Optional(value: null): None;
51 | function Optional(value: T | null) {
52 | if (value === null) {
53 | return None;
54 | }
55 | return Some(value);
56 | }
57 |
58 | Optional(3).isEmpty(); // false
59 | Optional(null).isEmpty(); // true
60 | Optional(3).get(); // 3
61 |
62 | type UserType = {
63 | id: number;
64 | name: Optional;
65 | friends: ReadonlyArray;
66 | };
67 | const userA: UserType = {
68 | id: 2,
69 | name: Optional("Alex"),
70 | friends: [
71 | {
72 | id: 3,
73 | name: Optional("Mike"),
74 | friends: [
75 | {
76 | id: 4,
77 | name: Optional("Georgie"),
78 | friends: [],
79 | },
80 | ],
81 | },
82 | ],
83 | };
84 |
85 | const getFriends = (user: UserType): ReadonlyArray => user.friends;
86 | const getName = (user: UserType): Optional => user.name;
87 | const friendsOfFriends = flatten(getFriends(userA).map(getFriends));
88 |
89 | const userName = Optional(userA).flatMap(getName);
90 | console.log(userName.isEmpty()); // false
91 | console.log((userName as Some).get());
92 | const evens = (n: number): O.Option =>
93 | n % 2 === 0 ? O.none : O.some(n);
94 |
--------------------------------------------------------------------------------
/chapters/chapter-6_Functional_Programming_Concepts/Monocle.ts:
--------------------------------------------------------------------------------
1 | import { pipe } from "fp-ts/lib/function";
2 | import { Lens } from "monocle-ts";
3 | import { modify, prop } from "monocle-ts/lib/Lens";
4 |
5 | interface TodoItem {
6 | id: string;
7 | title: string;
8 | completed: boolean;
9 | }
10 | interface TodoListState {
11 | allItemIds: string[];
12 | byItemId: { [prop: string]: TodoItem };
13 | }
14 |
15 | const byItemId = Lens.fromProp()("byItemId");
16 | interface UpdateTodoItemCompletedAction {
17 | type: "UPDATE_TODO_ITEM_COMPLETED";
18 | id: string;
19 | completed: boolean;
20 | }
21 | function reduceState(
22 | currentState: TodoListState,
23 | action: UpdateTodoItemCompletedAction
24 | ): TodoListState {
25 | switch (action.type) {
26 | case "UPDATE_TODO_ITEM_COMPLETED":
27 | return pipe(
28 | byItemId,
29 | prop(action.id),
30 | prop("completed"),
31 | modify((completed: boolean) => action.completed)
32 | )(currentState);
33 | }
34 | }
35 | const currentState: TodoListState = {
36 | allItemIds: ["1"],
37 | byItemId: {
38 | "1": {
39 | id: "1",
40 | title: "Buy milk",
41 | completed: false,
42 | },
43 | },
44 | };
45 | console.log(
46 | reduceState(currentState, {
47 | type: "UPDATE_TODO_ITEM_COMPLETED",
48 | id: "1",
49 | completed: true,
50 | })
51 | );
52 |
--------------------------------------------------------------------------------
/chapters/chapter-6_Functional_Programming_Concepts/PureFunctions.ts:
--------------------------------------------------------------------------------
1 | function add1(num: number): number {
2 | return num + 1;
3 | }
4 |
5 | console.log(add1(1)); // 2
6 | console.log(add1(1)); // 2
7 |
8 | function printNumber(num: number): void {
9 | console.log(num);
10 | }
11 |
12 | function toZero(num: number): 0 {
13 | return 0;
14 | }
15 |
16 | export interface IO {
17 | (): A;
18 | }
19 |
20 | export const log =
21 | (s: unknown): IO =>
22 | () =>
23 | console.log(s);
24 | const now: IO = () => new Date().toISOString();
25 |
26 | log("Hello")();
27 | console.log(now());
28 |
--------------------------------------------------------------------------------
/chapters/chapter-6_Functional_Programming_Concepts/Recursion.ts:
--------------------------------------------------------------------------------
1 | function factorial(num: number): number {
2 | if (num < 0) return -1;
3 | else if (num == 0) return 1;
4 | else {
5 | return num * factorial(num - 1);
6 | }
7 | }
8 |
9 | function sum(numbers: number[]): number {
10 | function recur(numbers: number[], currentSum: number): number {
11 | if (numbers.length === 0) {
12 | return currentSum;
13 | }
14 | let [first, ...rest] = numbers;
15 | return recur(rest, currentSum + first);
16 | }
17 |
18 | return recur(numbers, 0);
19 | }
20 |
21 | console.log(sum([1, 2, 3, 4, 5])); // 15
22 |
23 | function factorialTail(num: number, result: number = 1): number {
24 | if (num === 0) {
25 | return result;
26 | }
27 | return factorialTail(num - 1, num * result);
28 | }
29 |
--------------------------------------------------------------------------------
/chapters/chapter-6_Functional_Programming_Concepts/Referential.ts:
--------------------------------------------------------------------------------
1 | import { IO, log } from "./PureFunctions";
2 | import * as R from "ramda";
3 |
4 | function main(): IO {
5 | return R.compose(log, sumList, getArgs)(11, 4);
6 | }
7 |
8 | function sumList(number: number[]): number {
9 | return number.reduce((prev, curr) => prev + curr, 0);
10 | }
11 |
12 | function getArgs(a: number, b: number): number[] {
13 | return [a, b];
14 | }
15 |
16 | console.log(main()()); // 15
17 |
--------------------------------------------------------------------------------
/chapters/chapter-6_Functional_Programming_Concepts/Transducer.ts:
--------------------------------------------------------------------------------
1 | import * as R from "ramda";
2 |
3 | const collection = [1, 2, 3, 4, 5];
4 |
5 | function addReducer(curr: number, acc: number): number {
6 | return curr + acc;
7 | }
8 |
9 | console.log(collection.reduce(addReducer, 0));
10 | console.log(collection.filter((n: number) => (n & 1) === 1).reduce(addReducer));
11 |
12 | type Transducer = (reducerFn: Reducer) => Reducer;
13 | type Reducer = () => T | ((acc: T) => T) | ((acc: T, curr: K) => T);
14 |
15 | const transducer = R.compose(R.map(R.add(1)));
16 | const result = R.transduce(
17 | transducer,
18 | R.flip(R.append),
19 | [],
20 | collection
21 | );
22 | console.log(result); // [2, 3, 4, 5, 6]
23 |
--------------------------------------------------------------------------------
/chapters/chapter-6_Functional_Programming_Concepts/tempCodeRunnerFile.ts:
--------------------------------------------------------------------------------
1 | function addReducer(curr: number, acc: number): number {
2 | // return curr + acc;
3 | // }
4 |
5 | // console.log(collection.reduce(addReducer, 0));
6 | // console.log(collection.filter((n: number) => (n & 1) === 1).reduce(addReducer));
7 |
8 | // type Transducer = (reducerFn: Reducer) => Reducer;
9 | // type Reducer = () => T | ((acc: T) => T) | ((acc: T, curr: K) => T);
10 |
11 | // export type AnyFunction = (...xs: any[]) => T;
12 |
--------------------------------------------------------------------------------
/chapters/chapter-7_Reactive_Programming_concepts/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/TypeScript-4-Design-Patterns-and-Best-Practices/794888bd4c351b9565e01828440e3d0cf06d26c6/chapters/chapter-7_Reactive_Programming_concepts/.gitkeep
--------------------------------------------------------------------------------
/chapters/chapter-7_Reactive_Programming_concepts/Futures.ts:
--------------------------------------------------------------------------------
1 | // resolve(): Future;
2 | // resolve(value: T | FutureLike): Future;
3 | // interface FutureLike {
4 | // then(
5 | // onfulfilled?:
6 | // | ((value: T) => TResult1 | FutureLike)
7 | // | undefined
8 | // | null,
9 | // onrejected?:
10 | // | ((reason: any) => TResult2 | FutureLike)
11 | // | undefined
12 | // | null
13 | // ): FutureLike;
14 | // }
15 |
16 | // interface FutureConstructor {
17 | // readonly prototype: Future;
18 |
19 | // new (
20 | // executor: (
21 | // resolve: (value: T | FutureLike) => void,
22 | // reject: (reason?: any) => void
23 | // ) => Cancel
24 | // ): Future;
25 | // reject(reason?: any): Future;
26 | // resolve(): Future;
27 | // resolve(value: T | FutureLike): Future;
28 | // }
29 |
30 | // declare var Future: FutureConstructor;
31 |
32 | // interface Future {
33 | // then(
34 | // onfulfilled?:
35 | // | ((value: T) => TResult1 | FutureLike)
36 | // | undefined
37 | // | null,
38 | // onrejected?:
39 | // | ((reason: any) => TResult2 | FutureLike)
40 | // | undefined
41 | // | null
42 | // ): Future;
43 | // catch(
44 | // onrejected?:
45 | // | ((reason: any) => TResult | FutureLike)
46 | // | undefined
47 | // | null
48 | // ): Future;
49 | // }
50 |
51 | import { noop } from "lodash";
52 | export type Reject = (reason?: any) => void;
53 | export type Resolve = (t: TResult) => void;
54 |
55 | export type Execution = (
56 | resolve: (value: T) => void,
57 | reject: (reason?: any) => void
58 | ) => () => void;
59 |
60 | class Future {
61 | private fn: Execution;
62 |
63 | constructor(ex: Execution) {
64 | this.fn = ex;
65 | }
66 | fork(reject: Reject, resolve: Resolve): () => void {
67 | return this.fn(reject, resolve);
68 | }
69 |
70 | resolve(): Promise {
71 | return new Promise((resolve, reject) => {
72 | this.fn(reject, resolve);
73 | });
74 | }
75 |
76 | static success(t: T): Future {
77 | return new Future((reject: Reject, resolve: Resolve) => {
78 | resolve(t);
79 | return noop;
80 | });
81 | }
82 |
83 | static fail(err: E): Future {
84 | return new Future((reject: Reject, resolve: Resolve) => {
85 | reject(err);
86 | return noop;
87 | });
88 | }
89 | then(f: (t: T) => Future): Future {
90 | return new Future((reject: Reject, resolve: Resolve) => {
91 | return this.fn(
92 | (err) => reject(err),
93 | (a: T) => f(a).fork(reject, resolve)
94 | );
95 | });
96 | }
97 | }
98 |
99 | const task = new Future((reject, resolve: Resolve) => {
100 | const v = setTimeout(() => resolve("Result"), 1000);
101 | return () => clearTimeout(v);
102 | }).then((value: string) => {
103 | return Future.success(value.toUpperCase());
104 | });
105 | const cancelTask = task.fork(
106 | (err) => console.error(err),
107 | (result) => console.warn(`Task Success: ${result}`)
108 | );
109 |
--------------------------------------------------------------------------------
/chapters/chapter-7_Reactive_Programming_concepts/Observables.ts:
--------------------------------------------------------------------------------
1 | import { of, from, Observable, interval } from "rxjs";
2 | import { take, share } from "rxjs/operators";
3 |
4 | // From constant values or objects
5 | of(1, 2, 3, 4, 5);
6 | of({ id: 1, data: "value" });
7 |
8 | // From array of values
9 | from([1, 2, 3, 4, 5]);
10 |
11 | // From a Promise
12 | from(Promise.resolve("users data"));
13 |
14 | function* getNextRandom() {
15 | yield Math.random() * 100;
16 | }
17 |
18 | // From a custom producer function
19 | const randomValues = new Observable((subscriber) => {
20 | subscriber.next(1);
21 | subscriber.next(2);
22 | subscriber.next(3);
23 | setInterval(() => {
24 | subscriber.next(getNextRandom().next().value);
25 | }, 1000);
26 | });
27 |
28 | // randomValues.subscribe((value) => {
29 | // console.log("Value received: ", value);
30 | // }, undefined);
31 |
32 | let origin = from([1, 2, 3, 4, new Error("Error"), 6]);
33 | origin.subscribe(
34 | (v: any) => {
35 | console.log("Value accepted: ", v);
36 | },
37 | (e) => {
38 | console.log("Error accepted: ", e);
39 | },
40 | () => {
41 | console.log("Finished");
42 | }
43 | );
44 |
45 | setTimeout(() => {
46 | origin.subscribe(
47 | (v: number | Error) => {
48 | console.log("Value accepted: ", v);
49 | },
50 | (e) => {
51 | console.log("Error accepted: ", e);
52 | },
53 | () => {
54 | console.log("Finished");
55 | }
56 | );
57 | }, 1000);
58 |
59 | const stream$ = interval(1000).pipe(take(5), share());
60 | stream$.subscribe((v) =>
61 | console.log("Value accepted from first subscriber: ", v)
62 | );
63 |
64 | setTimeout(() => {
65 | stream$.subscribe((v) => {
66 | console.log("Value accepted from second subscriber: ", v);
67 | });
68 | }, 2000);
69 |
--------------------------------------------------------------------------------
/chapters/chapter-7_Reactive_Programming_concepts/Operators.ts:
--------------------------------------------------------------------------------
1 | import { of, from } from "rxjs";
2 | import { filter, map, pluck, mapTo } from "rxjs/operators";
3 | // map
4 | of(1, 2, 3, 4, 5)
5 | .pipe(map((v: number) => v * 2))
6 | .subscribe((v: number) => console.log(`Value transformed: ${v}`));
7 | // filter
8 | of(1, 2, 3, 4, 5)
9 | .pipe(filter((v: number) => v % 2 == 0))
10 | .subscribe((v: number) => console.log(`Value transformed: ${v}`));
11 | // pluck
12 | from([
13 | {
14 | id: 1,
15 | name: "Theo",
16 | },
17 | {
18 | id: 2,
19 | name: "Alex",
20 | },
21 | ])
22 | .pipe(pluck("name"))
23 | .subscribe((v: string) => console.log(`Value plucked: ${v}`));
24 |
25 | from([
26 | {
27 | id: 1,
28 | name: "Theo",
29 | },
30 | {
31 | id: 2,
32 | name: "Alex",
33 | },
34 | ])
35 | .pipe(map((v) => v.name))
36 | .subscribe((v: string) => console.log(`Value plucked: ${v}`));
37 |
--------------------------------------------------------------------------------
/chapters/chapter-7_Reactive_Programming_concepts/Patterns.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Subject,
3 | Subscriber,
4 | } from "../chapter-5_Behavioral_Design_Patterns/Observer";
5 |
6 | export interface AsyncRequest {
7 | success: boolean;
8 | data?: T;
9 | }
10 |
11 | export async function asyncPoll(
12 | fn: () => PromiseLike>,
13 | pollInterval = 5 * 1000,
14 | pollTimeout = 30 * 1000
15 | ): Promise {
16 | const endTime = new Date().getTime() + pollTimeout;
17 | const checkCondition = (resolve: Function, reject: Function): void => {
18 | Promise.resolve(fn())
19 | .then((result) => {
20 | const now = new Date().getTime();
21 | if (result.success) {
22 | resolve(result.data);
23 | } else if (now < endTime) {
24 | setTimeout(checkCondition, pollInterval, resolve, reject);
25 | } else {
26 | reject(new Error("Reached timeout. Exiting"));
27 | }
28 | })
29 | .catch((err) => {
30 | reject(err);
31 | });
32 | };
33 | return new Promise(checkCondition);
34 | }
35 |
36 | const result = asyncPoll(async () => {
37 | try {
38 | const result = await Promise.resolve({ data: "Value" });
39 | if (result.data) {
40 | return Promise.resolve({
41 | success: true,
42 | data: result,
43 | });
44 | } else {
45 | return Promise.resolve({
46 | success: false,
47 | });
48 | }
49 | } catch (err) {
50 | return Promise.reject(err);
51 | }
52 | });
53 |
54 | result.then((d) => {
55 | console.log(d);
56 | });
57 |
58 | const source = [1, 3, 4];
59 | // const iter = new ListIterator(source);
60 |
61 | // function pollOnData(iterator: ListIterator) {
62 | // while (iterator.hasNext()) {
63 | // console.log("Processing data:", iterator.next());
64 | // }
65 | // }
66 | // // producer
67 | // setTimeout(() => {
68 | // source.push(Math.floor(Math.random() * 100));
69 | // }, 1000);
70 |
71 | // // consumer
72 | // setTimeout(() => {
73 | // pollOnData(iter);
74 | // }, 2000);
75 |
76 | export class Producer extends Subject {
77 | constructor(private state: number[]) {
78 | super();
79 | this.state = state;
80 | }
81 |
82 | getState(): number[] {
83 | return this.state;
84 | }
85 |
86 | setState(state: number[]) {
87 | this.state = state;
88 | }
89 | }
90 |
91 | export class Consumer implements Subscriber {
92 | private state: any;
93 |
94 | constructor(private subject: Producer) {}
95 |
96 | public notify(): void {
97 | this.state = this.subject.getState();
98 | for (let item of this.state) {
99 | console.log("Processing data:", item);
100 | }
101 | }
102 | }
103 |
104 | const producer = new Producer([]);
105 | const subA = new Consumer(producer);
106 | producer.addSubscriber(subA);
107 |
108 | const subB = new Consumer(producer);
109 | producer.addSubscriber(subB);
110 |
111 | setInterval(() => {
112 | producer.setState(
113 | producer.getState().concat(Math.floor(Math.random() * 100))
114 | );
115 | producer.notify();
116 | }, 1000);
117 |
--------------------------------------------------------------------------------
/chapters/chapter-7_Reactive_Programming_concepts/Promises.ts:
--------------------------------------------------------------------------------
1 | const fetcher = require("node-fetch");
2 |
3 | const pullFromApi = fetcher(
4 | "https://jsonplaceholder.typicode.com/todos/1"
5 | ).then((response) => response.json());
6 |
7 | pullFromApi.then((result) => {
8 | console.log(result);
9 | });
10 |
11 | const promiseValue = Promise.resolve("Value");
12 | const promiseError = Promise.reject("Value");
13 | function delay(ms: number = 1000) {
14 | return new Promise((resolve) => setTimeout(resolve, ms));
15 | }
16 | function failAfter(ms: number = 1000) {
17 | return new Promise((_, reject) => setTimeout(reject, ms));
18 | }
19 | const races = Promise.race([delay(1000), failAfter(500)]);
20 | const all = Promise.all([delay(1000), failAfter(1500)]);
21 | const settled = Promise.allSettled([delay(1000), failAfter(500)]);
22 | (async () => {
23 | races
24 | .then((value) => {
25 | console.log(value);
26 | })
27 | .catch((_) => {
28 | console.log("Error");
29 | });
30 | })();
31 | (async () => {
32 | all
33 | .then((value) => {
34 | console.log(value);
35 | })
36 | .catch((_) => {
37 | console.log("Error");
38 | });
39 | })();
40 | (async () => {
41 | settled
42 | .then((value) => {
43 | console.log(value);
44 | })
45 | .catch((_) => {
46 | console.log("Error");
47 | });
48 | })();
49 |
--------------------------------------------------------------------------------
/chapters/chapter-7_Reactive_Programming_concepts/example.ts:
--------------------------------------------------------------------------------
1 | {
2 | class ChristmasBox {
3 | private constructor(private value: TSurprise) {
4 | this.value = value;
5 | }
6 | static with(value: any): ChristmasBox {
7 | return new ChristmasBox(value);
8 | }
9 |
10 | open(): TSurprise {
11 | return this.value;
12 | }
13 |
14 | turnInto(
15 | f: (v: TSurprise) => TwistedSurprise
16 | ): ChristmasBox {
17 | return ChristmasBox.with(f(this.value));
18 | }
19 |
20 | chain(
21 | fn: (v: TSurprise) => ChristmasBox
22 | ): ChristmasBox {
23 | if (this.value instanceof ChristmasBox) {
24 | return fn(this.value.open());
25 | } else {
26 | return fn(this.value);
27 | }
28 | }
29 | }
30 |
31 | console.log(ChristmasBox.with("Chocolate candy")); // Oops we got a close box. We want it open
32 | console.log(ChristmasBox.with("Chocolate candy").open()); // Thats better!
33 |
34 | const molases = (candy: string) => ChristmasBox.with("Molasses");
35 | const ourPresent = ChristmasBox.with("Chocolate candy");
36 | ourPresent.turnInto(molases);
37 | const ourNewPresent = ourPresent.turnInto(molases);
38 |
39 | console.log(ourNewPresent.open()); // Yikes!
40 |
41 | const chocolateFountain = (mollases: string) =>
42 | ChristmasBox.with("Chocolate fountain");
43 |
44 | const ourNewNewPresent = ourPresent.chain(molases).chain(chocolateFountain);
45 |
46 | console.log(ourNewNewPresent.open()); // Yum Yum!
47 | }
48 |
49 | type T0 = Extract<"a" | "b" | "c", "a" | "b" | "f">;
50 |
51 | type T1 = Extract void), Function>;
52 |
53 | type T1 = () => void;
54 |
--------------------------------------------------------------------------------
/chapters/chapter-8_Best_practices/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/TypeScript-4-Design-Patterns-and-Best-Practices/794888bd4c351b9565e01828440e3d0cf06d26c6/chapters/chapter-8_Best_practices/.gitkeep
--------------------------------------------------------------------------------
/chapters/chapter-8_Best_practices/DDD.ts:
--------------------------------------------------------------------------------
1 | export abstract class Value {
2 | constructor(protected props: T) {
3 | this.props = props;
4 | }
5 | }
6 |
7 | export interface AddressProps {
8 | country: string;
9 | postCode: string;
10 | street: string;
11 | }
12 |
13 | export class Address extends Value {
14 | get country(): string {
15 | return this.props.country;
16 | }
17 |
18 | get postCode(): string {
19 | return this.props.postCode;
20 | }
21 |
22 | get street(): string {
23 | return this.props.street;
24 | }
25 |
26 | equals(other?: Value): boolean {
27 | if (!other) {
28 | return false;
29 | }
30 | return JSON.stringify(this) === JSON.stringify(other);
31 | }
32 |
33 | protected isValid?(props: AddressProps): void {
34 | // Check if address if valid
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/chapters/chapter-8_Best_practices/PatternCombinations.ts:
--------------------------------------------------------------------------------
1 | import Singleton from "chapters/chapter-3_Creational_Design_Patterns/singleton";
2 |
3 | {
4 | type ServiceA = {
5 | action: () => void;
6 | };
7 | type ServiceB = {
8 | action: () => void;
9 | };
10 |
11 | class Facade {
12 | private static instance: Facade;
13 | private constructor(
14 | private serviceA: ServiceA,
15 | private serviceB: ServiceB
16 | ) {}
17 | static getInstance(serviceA: ServiceA, serviceB: ServiceB) {
18 | if (!Facade.instance) {
19 | Facade.instance = new Facade(serviceA, serviceB);
20 | }
21 | return Facade.instance;
22 | }
23 |
24 | perform() {
25 | this.serviceA.action();
26 | this.serviceB.action();
27 | // more complex logic here
28 | }
29 | }
30 |
31 | interface Iterator {
32 | next(): T | null;
33 | hasNext(): boolean;
34 | }
35 |
36 | type Component = {
37 | parent: Component;
38 | };
39 |
40 | class Composite {
41 | private children: Component[] = [];
42 |
43 | getIterator(): Iterator {
44 | return new (class {
45 | private index: number = 0;
46 | constructor(public superThis: Composite) {}
47 |
48 | key(): number {
49 | return this.index;
50 | }
51 | next(): Component {
52 | const item = this.superThis.children[this.index];
53 | this.index += 1;
54 | return item;
55 | }
56 |
57 | hasNext(): boolean {
58 | return this.index < this.superThis.children.length;
59 | }
60 | })(this);
61 | }
62 | }
63 | }
64 |
65 | {
66 | interface Command {
67 | execute(): void;
68 | }
69 | class SaveCommand implements Command {
70 | constructor(private receiver: Receiver) {}
71 |
72 | execute() {
73 | this.receiver.saveMemento();
74 | }
75 | }
76 | class RestoreCommand implements Command {
77 | constructor(private receiver: Receiver) {}
78 |
79 | execute() {
80 | this.receiver.restoreLastMemento();
81 | }
82 | }
83 | interface Receiver {
84 | restoreLastMemento();
85 | saveMemento();
86 | }
87 | type Originator = {
88 | save: () => Memento;
89 | restore: (memento: Memento) => void;
90 | };
91 | type Memento = string;
92 | class CareTaker implements Receiver {
93 | constructor(
94 | private originator: Originator,
95 | private mementos: Memento[] = []
96 | ) {}
97 |
98 | restoreLastMemento() {
99 | if (this.mementos.length === 0) {
100 | return;
101 | }
102 | const memento = this.mementos.pop()!;
103 | this.originator.restore(memento);
104 | }
105 |
106 | saveMemento() {
107 | this.mementos.push(this.originator.save());
108 | }
109 | }
110 | }
111 |
--------------------------------------------------------------------------------
/chapters/chapter-8_Best_practices/SOLID.ts:
--------------------------------------------------------------------------------
1 | import { Collection } from "immutable";
2 | import { kebabCase } from "lodash";
3 |
4 | {
5 | class User {
6 | constructor(
7 | private name: string,
8 | private email: string,
9 | private password: string
10 | ) {}
11 |
12 | generateSlug(): string {
13 | return kebabCase(this.name);
14 | }
15 |
16 | login(email: string, password: string) {}
17 | sendEmail(email: string, template: string) {}
18 | }
19 |
20 | class UserAccountService {
21 | login(user: User, password: string) {}
22 | }
23 |
24 | class EmailService {
25 | sendEmailToUser(user: User, template: string) {}
26 | }
27 | }
28 |
29 | {
30 | type AccountType = "Normal" | "Premium" | "Ultimate";
31 | class User {
32 | constructor(
33 | private name: string,
34 | private email: string,
35 | private password: string,
36 | private accountType: AccountType = "Normal"
37 | ) {}
38 | isPremium(): boolean {
39 | return this.accountType === "Premium";
40 | }
41 | getAccountType(): AccountType {
42 | return this.accountType;
43 | }
44 | }
45 | type Voucher = string;
46 | const userTypeToVoucherMap: Record = {
47 | Normal: "10% discount",
48 | Premium: "15% discount",
49 | Ultimate: "20% discount",
50 | };
51 | class VoucherService {
52 | getVoucher(user: User): string {
53 | return userTypeToVoucherMap[user.getAccountType()];
54 | }
55 | }
56 | }
57 |
58 | {
59 | interface Bag {
60 | push(item: T);
61 | pop(): T | undefined;
62 | isEmpty(): boolean;
63 | }
64 |
65 | class Queue implements Bag {
66 | constructor(private items = []) {}
67 | push(item: T) {}
68 | pop(): T | undefined {
69 | if (this.items.length > 0) {
70 | return this.items.pop();
71 | }
72 | return undefined;
73 | }
74 | isEmpty(): boolean {
75 | return this.items.length === 0;
76 | }
77 | }
78 |
79 | class Stack implements Bag {
80 | constructor(private items: T[] = []) {}
81 | push(item: T) {}
82 | pop(): T | undefined {
83 | if (this.items.length > 0) {
84 | return this.items.pop();
85 | }
86 | return undefined;
87 | }
88 | isEmpty(): boolean {
89 | return this.items.length === 0;
90 | }
91 | }
92 |
93 | class NonEmptyStack implements Bag {
94 | private tag: any = Symbol();
95 | constructor(private items: T[] = []) {
96 | if (this.items.length == 0) {
97 | this.items.push(this.tag);
98 | }
99 | }
100 |
101 | push(item: T) {
102 | this.items.push(item);
103 | }
104 | pop(): T | undefined {
105 | if (this.items.length === 1) {
106 | const item = this.items.pop();
107 | this.items.push(this.tag);
108 | return item;
109 | }
110 | if (this.items.length > 1) {
111 | return this.items.pop();
112 | }
113 | return undefined;
114 | }
115 | isEmpty(): boolean {
116 | return this.items.length === 0;
117 | }
118 | }
119 |
120 | class Link {
121 | constructor(private start: string, end: string) {}
122 | }
123 |
124 | function visit(bag: Bag) {
125 | bag.push(new Link("1", "2"));
126 | while (!bag.isEmpty()) {
127 | const r = bag.pop();
128 | }
129 | }
130 | }
131 |
132 | {
133 | type User = {
134 | id: string;
135 | name: string;
136 | email: string;
137 | };
138 | interface UserService {
139 | findBy(id: string): User | undefined;
140 | create(specification: User): void;
141 | update(id: string, values: Partial): void;
142 | }
143 |
144 | interface Collection {
145 | pushBack(item: T): void;
146 | popBack(): T;
147 | pushFront(item: T): void;
148 | popFront(): T;
149 | isEmpty(): boolean;
150 | insertAt(item: T, index: number): void;
151 | deleteAt(index: number): T | undefined;
152 | }
153 |
154 | interface Collection {
155 | isEmpty(): boolean;
156 | }
157 |
158 | interface Array extends Collection {
159 | insertAt(item: T, index: number): void;
160 | deleteAt(index: number): T | undefined;
161 | }
162 |
163 | interface Stack extends Collection {
164 | pushFront(item: T): void;
165 | popFront(): T;
166 | }
167 |
168 | interface Queue extends Collection {
169 | pushBack(item: T): void;
170 | popFront(): T;
171 | }
172 | }
173 |
174 | {
175 | type User = {
176 | name: string;
177 | email: string;
178 | };
179 | class UserService {
180 | constructor() {}
181 | findByEmail(email: string): User | undefined {
182 | const userRepo = UserRepositoryFactory.getInstance();
183 | return userRepo.findByEmail(email);
184 | }
185 | }
186 | class UserRepositoryFactory {
187 | static getInstance(): UserRepository {
188 | return new UserRepository();
189 | }
190 | }
191 |
192 | class UserRepository {
193 | users: User[] = [{ name: "Theo", email: "theo@example.com" }];
194 | findByEmail(email: string): User | undefined {
195 | const user = this.users.find((u) => u.email === email);
196 | return user;
197 | }
198 | }
199 | }
200 |
201 | {
202 | type User = {
203 | name: string;
204 | email: string;
205 | };
206 | interface UserQuery {
207 | findByEmail(email: string): User | undefined;
208 | }
209 | class UserService {
210 | constructor(
211 | private userQuery: UserQuery = UserRepositoryFactory.getInstance()
212 | ) {}
213 | findByEmail(email: string): User | undefined {
214 | return this.userQuery.findByEmail(email);
215 | }
216 | }
217 | class UserRepositoryFactory {
218 | static getInstance(): UserRepository {
219 | return new UserRepository();
220 | }
221 | }
222 |
223 | class UserRepository implements UserQuery {
224 | users: User[] = [{ name: "Theo", email: "theo@example.com" }];
225 | findByEmail(email: string): User | undefined {
226 | const user = this.users.find((u) => u.email === email);
227 | return user;
228 | }
229 | }
230 | }
231 |
--------------------------------------------------------------------------------
/chapters/chapter-8_Best_practices/Utilities.ts:
--------------------------------------------------------------------------------
1 | {
2 | type Address = Readonly<{
3 | streetNum: number;
4 | town: string;
5 | streetName: string;
6 | }>;
7 | type User = Readonly<{
8 | name: string;
9 | email: string;
10 | address: Address;
11 | }>;
12 |
13 | function loginUser(user: User) {
14 | // perform login
15 | }
16 | }
17 |
18 | type Address = {
19 | streetNum: number;
20 | town: string;
21 | streetName: string;
22 | };
23 | type User = {
24 | name: string;
25 | email: string;
26 | address: Address;
27 | };
28 |
29 | export type UserRead = Readonly;
30 | export type UserWrite = User;
31 |
32 | {
33 | type UserKind = "normal" | "visitor" | "admin";
34 | type PartialRecord = {
35 | [P in K]?: T;
36 | };
37 | type map = PartialRecord;
38 | const errorMessageForUserViewRequestMap: PartialRecord = {
39 | normal: "We're having trouble Please try again in a few minutes.",
40 |
41 | visitor: "You do not have permissions to view this page.",
42 | };
43 | }
44 |
45 | console.log(Object.getOwnPropertyNames(String.prototype));
46 |
--------------------------------------------------------------------------------
/chapters/chapter-9_Anti_patterns/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/TypeScript-4-Design-Patterns-and-Best-Practices/794888bd4c351b9565e01828440e3d0cf06d26c6/chapters/chapter-9_Anti_patterns/.gitkeep
--------------------------------------------------------------------------------
/chapters/chapter-9_Anti_patterns/ClassesFatigue.ts:
--------------------------------------------------------------------------------
1 | interface Shape {}
2 | class Circle implements Shape {}
3 | class Rectangle implements Shape {}
4 | class Polygon implements Shape {}
5 | class Square extends Polygon {}
6 | class Triangle extends Polygon {}
7 |
8 | interface Reader {
9 | read(): string[];
10 | }
11 |
12 | interface Writer {
13 | write(input: string[]): void;
14 | }
15 |
16 | class CSV implements Reader, Writer {
17 | constructor(csvFilePath: string) {}
18 |
19 | read(): string[] {
20 | return [];
21 | }
22 | write(input: string[]): void {}
23 | }
24 | {
25 | class CSVReader implements Reader {
26 | constructor(csvFilePath: string) {}
27 |
28 | read(): string[] {
29 | return [];
30 | }
31 | }
32 |
33 | class CSVWriter implements Writer {
34 | constructor() {}
35 |
36 | write(input: string[]): void {}
37 | }
38 | class ExcelReader implements Reader {
39 | constructor(excelFilePath: string) {}
40 |
41 | read(): string[] {
42 | return [];
43 | }
44 | }
45 | class PDFWriter implements Writer {
46 | constructor(pdfFilePath: string) {}
47 |
48 | write(input: string[]): void {}
49 | }
50 |
51 | class ReaderToWriters {
52 | constructor(private reader: Reader, private writers: Writer[]) {}
53 | perform() {
54 | const lines = this.reader.read();
55 | this.writers.forEach((w) => w.write(lines));
56 | }
57 | }
58 | }
59 | class ExcelToCSV extends CSV {
60 | constructor(csvFilePath: string, excelFilePath: string) {
61 | super(csvFilePath);
62 | }
63 |
64 | read(): string[] {
65 | // Read from Excel file
66 | return [];
67 | }
68 | }
69 | class ExcelToPDF extends ExcelToCSV {
70 | constructor(csvFilePath: string, excelFilePath: string, pdfFilePath: string) {
71 | super("", excelFilePath);
72 | }
73 |
74 | write(): string[] {
75 | // Write to PDF
76 | return [];
77 | }
78 | }
79 |
80 | interface Animal {
81 | eat(): void;
82 | }
83 | interface Mammal extends Animal {
84 | sleep(): void;
85 | }
86 | interface Flyer extends Animal {
87 | fly(): void;
88 | }
89 | class Bat implements Mammal, Flyer {
90 | fly(): void {}
91 | eat(): void {}
92 | sleep(): void {}
93 | }
94 |
95 | // interface Configuration {
96 | // paths: {
97 | // apiBase: string;
98 | // login: string;
99 | // };
100 | // }
101 |
102 | const applicationConfig = {
103 | paths: {
104 | apiBase: "/v1",
105 | login: "/login",
106 | },
107 | flags: {
108 | isEnabled: true,
109 | isAvailable() {
110 | return this.isEnabled;
111 | },
112 | },
113 | };
114 |
115 | type Configuration = Readonly;
116 |
--------------------------------------------------------------------------------
/chapters/chapter-9_Anti_patterns/LanguageIdioms.ts:
--------------------------------------------------------------------------------
1 | import { fst } from "fp-ts/lib/ReadonlyTuple";
2 | import { type } from "ramda";
3 |
4 | class Employee {
5 | private id: string;
6 | private name: string;
7 | constructor(id: string, name: string) {
8 | this.id = id;
9 | this.name = name;
10 | }
11 | getName(): string {
12 | return this.name;
13 | }
14 |
15 | setName(name: string) {
16 | this.name = name;
17 | }
18 |
19 | getId(): string {
20 | return this.id;
21 | }
22 | }
23 | console.log(JSON.stringify(new Employee("Theo", "1"))); // {"id":"Theo","name":"1"}
24 |
25 | {
26 | type Employee = Readonly<{
27 | name: string;
28 | id: string;
29 | }>;
30 |
31 | const theo: Employee = {
32 | name: "Theo",
33 | id: "1",
34 | };
35 |
36 | const newTheo: Employee = { ...theo, id: "2" };
37 | }
38 |
39 | interface error {
40 | Error(): string;
41 | }
42 |
43 | import * as fs from "fs";
44 | import * as fsPromises from "fs/promises";
45 | fs.readFile("example.txt", function (err, data) {
46 | if (err) {
47 | return console.error(err);
48 | }
49 | console.log("File contents" + data.toString());
50 | });
51 |
52 | async function readFist1024bytes() {
53 | let file: fsPromises.FileHandle | null = null;
54 | const buffer = Buffer.alloc(1024);
55 | try {
56 | file = await fsPromises.open("example.txt", "r+");
57 | await file.read(buffer);
58 | } finally {
59 | if (file) {
60 | await file.close();
61 | }
62 | }
63 | console.log(buffer.toString());
64 | }
65 |
66 | // do something with the open *File f
67 | readFist1024bytes();
68 |
--------------------------------------------------------------------------------
/chapters/chapter-9_Anti_patterns/PermissiveTypes.ts:
--------------------------------------------------------------------------------
1 | interface Callback {
2 | onEvent: Function;
3 | }
4 |
5 | const callBack1: Callback = {
6 | onEvent: (a: string) => a,
7 | };
8 |
9 | const callBack2: Callback = {
10 | onEvent: () => "a",
11 | };
12 |
13 | const callBack3: Callback = {
14 | onEvent: () => 1,
15 | };
16 |
--------------------------------------------------------------------------------
/chapters/chapter-9_Anti_patterns/RuntimeAssertions.ts:
--------------------------------------------------------------------------------
1 | function divMod(x: number, y: number): [number, number] {
2 | assertIsNumber(x);
3 | assertIsNumber(y);
4 | assertNotZero(y);
5 | return [Math.floor(x / y), x % y];
6 | }
7 |
8 | export function assertIsNumber(
9 | val: T,
10 | errorMessage = `Expected 'val' to be a number, but received: '${val}'`
11 | ) {
12 | if (typeof val !== "number") {
13 | throw new Error(errorMessage);
14 | }
15 | }
16 |
17 | export function assertNotZero(
18 | val: T,
19 | errorMessage = `Expected 'val' to be a non zero number, but received: '${val}'`
20 | ) {
21 | if (val === 0) {
22 | throw new Error(errorMessage);
23 | }
24 | }
25 |
26 | // divMod(2, 0);
27 |
--------------------------------------------------------------------------------
/chapters/chapter-9_Anti_patterns/TypeInference.ts:
--------------------------------------------------------------------------------
1 | function example(param: { value: "a" }) {
2 | return param;
3 | }
4 |
5 | const myParam = {
6 | value: "a",
7 | };
8 |
9 | example(myParam);
10 |
11 | // Literal types are widened when they are inferred for mutable locations (such as the value property in your example) unless you have a type annotation or type assertion indicating otherwise.
12 |
13 | const boo = function () {
14 | return 1;
15 | };
16 |
--------------------------------------------------------------------------------
/chapters/chapter-9_Anti_patterns/inference.ts:
--------------------------------------------------------------------------------
1 | import { values } from "ramda";
2 |
3 | const arr = [1, 2, 3];
4 | let x;
5 | x = 2;
6 |
7 | function example(param: { value: string } = { value: "a" }) {
8 | return param;
9 | }
10 |
11 | const param = {
12 | value: "a",
13 | };
14 | example(param);
15 |
16 | import fetch from "node-fetch";
17 |
18 | fetch("https://jsonplaceholder.typicode.com/users/1")
19 | .then(async (res) => {
20 | return mapUser(await res.json());
21 | })
22 | .then((res) => {
23 | console.log(res);
24 | });
25 |
26 | type UserResponse = {
27 | id: string;
28 | name: string;
29 | username: string;
30 | };
31 |
32 | function mapJsonResponse(json: any): UserResponse[] {
33 | const result: UserResponse[] = [];
34 | for (let item of json) {
35 | result.push({
36 | id: item["id"] ?? null,
37 | name: item["name"] ?? null,
38 | username: item["username"] ?? null,
39 | });
40 | }
41 | return result;
42 | }
43 |
44 | function mapUser(user: any) {
45 | return {
46 | id: user["id"] ?? null,
47 | name: user["name"] ?? null,
48 | username: user["username"] ?? null,
49 | };
50 | }
51 |
--------------------------------------------------------------------------------
/chapters/smoke.ts:
--------------------------------------------------------------------------------
1 | export function sum(a: number, b: number) {
2 | return a + b;
3 | }
4 |
5 | export function forOf
27 |
28 | ## Instructions and Navigations
29 | All of the code is organized into folders. For example, Chapter02.
30 |
31 | The code will look like the following:
32 | ```
33 | export class EventCreator implements EventSender {
34 | sendEvent(action: string): void {
35 | console.log("Event Created: ", action);
36 | }
37 | }
38 | ```
39 |
40 | **Following is what you need for this book:**
41 | If you're a developer looking to learn how to apply established design patterns to solve common programming problems instead of reinventing solutions, you'll find this book useful. You're not expected to have prior knowledge of design patterns. Basic TypeScript knowledge is all you need to get started with this book.
42 |
43 | With the following software and hardware list you can run all code files present in the book (Chapter 1-9).
44 | ### Software and Hardware List
45 | | Chapter | Software required | OS required |
46 | | -------- | ------------------------------------ | ----------------------------------- |
47 | | 1 - 9 | Visual Studio Code 1.49, Node.js 12.18.3, TypeScript 4.1 | Windows, Mac OS X, and Linux (Any) |
48 |
49 | We also provide a PDF file that has color images of the screenshots/diagrams used in this book. [Click here to download it](https://static.packt-cdn.com/downloads/9781800563421_ColorImages.pdf).
50 |
51 | ### Related products
52 | * Mastering TypeScript 3 - Third Edition [[Packt]](https://www.packtpub.com/product/mastering-typescript-3-third-edition/9781789536706?utm_source=github&utm_medium=repository&utm_campaign=9781789536706) [[Amazon]](https://www.amazon.com/dp/1789536707)
53 |
54 | * Advanced TypeScript 3 Programming Projects [[Packt]](https://www.packtpub.com/product/advanced-typescript-3-programming-projects/9781789133042?utm_source=github&utm_medium=repository&utm_campaign=9781789133042) [[Amazon]](https://www.amazon.com/dp/1789133041)
55 |
56 | ## Get to Know the Author
57 | **Theo Despoudis**
58 | lives in Ireland, where he works as a Software Engineer for WP Engine and as a part-time tech practitioner for Fixate. He is the co-author of The React Workshop and Advanced Go Programming in 7 Days, Dzone Core Member, and maintains some open source projects on GitHub. Theo is available for conference talks, independent consulting, and corporate training services opportunities.
59 | ### Download a free PDF
60 |
61 | If you have already purchased a print or Kindle version of this book, you can get a DRM-free PDF version at no cost.