Skip to content

Factory Design Pattern

Video Lecture

Section Video Links
Factory Pattern Factory Factory Pattern  
Factory Use Case Factory Use Case Factory Use Case  

Overview

... To read hidden text, either pause Video Lectures, refer to Book or subscribe to Medium Membership.

Terminology

... To read hidden text, either pause Video Lectures, refer to Book or subscribe to Medium Membership.

Factory UML Diagram

Factory Pattern Overview

Source Code

... To read hidden text, either pause Video Lectures, refer to Book or subscribe to Medium Membership.

./src/factory/factory-concept.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// The Factory Concept

interface IProduct {
    name: string
}

class ConcreteProduct implements IProduct {
    name = ''
}

class ConcreteProductA extends ConcreteProduct {
    constructor() {
        super()
        this.name = 'ConcreteProductA'
    }
}

class ConcreteProductB extends ConcreteProduct {
    constructor() {
        super()
        this.name = 'ConcreteProductB'
    }
}

class ConcreteProductC extends ConcreteProduct {
    constructor() {
        super()
        this.name = 'ConcreteProductC'
    }
}

class Creator {
    static createObject(someProperty: string): IProduct {
        if (someProperty === 'a') {
            return new ConcreteProductA()
        } else if (someProperty === 'b') {
            return new ConcreteProductB()
        } else {
            return new ConcreteProductC()
        }
    }
}

// The Client
const PRODUCT = Creator.createObject('b')
console.log(PRODUCT.name)

Output

node ./dist/factory/factory-concept.js
ConcreteProductB

Factory Use Case

... To read hidden text, either pause Video Lectures, refer to Book or subscribe to Medium Membership.

Factory Example UML Diagram

Chair Factory

Source Code

./src/factory/client.ts

1
2
3
4
5
// Factory Use Case Example Code
import ChairFactory from './chair-factory'

const CHAIR = ChairFactory.getChair('SmallChair')
console.log(CHAIR.getDimensions())

./src/factory/dimension.ts

1
2
3
4
5
export type dimension = {
    height: number
    width: number
    depth: number
}

./src/factory/chair.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { dimension } from './dimension'

// A Chair Interface
interface IChair {
    height: number
    width: number
    depth: number
    getDimensions(): dimension
}

// The Chair Base Class
export default class Chair implements IChair {
    height = 0
    width = 0
    depth = 0

    getDimensions(): dimension {
        return {
            width: this.width,
            depth: this.depth,
            height: this.height,
        }
    }
}

./src/factory/chair-factory.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import SmallChair from './small-chair'
import MediumChair from './medium-chair'
import BigChair from './big-chair'
import IChair from './chair'

export default class ChairFactory {
    static getChair(chair: string): IChair {
        if (chair == 'BigChair') {
            return new BigChair()
        } else if (chair == 'MediumChair') {
            return new MediumChair()
        } else {
            return new SmallChair()
        }
    }
}

./src/factory/small-chair.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import Chair from './chair'

export default class SmallChair extends Chair {
    constructor() {
        super()
        this.height = 40
        this.width = 40
        this.depth = 40
    }
}

./src/factory/medium-chair.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import Chair from './chair'

export default class MediumChair extends Chair {
    constructor() {
        super()
        this.height = 60
        this.width = 60
        this.depth = 60
    }
}

./src/factory/big-chair.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import Chair from './chair'

export default class BigChair extends Chair {
    constructor() {
        super()
        this.height = 80
        this.width = 80
        this.depth = 80
    }
}

Output

node ./dist/factory/client.js
{'width': 40, 'depth': 40, 'height': 40}

Summary

... To read hidden text, either pause Video Lectures, refer to Book or subscribe to Medium Membership.