Typescript patterns for creating a modular library design

Question

Typescript patterns for creating a modular library design

Transitioning a JavaScript project to TypeScript has been challenging for me, especially when it comes to establishing a solid design pattern for the library's modularity.

Main Concept

The core functionality of my library is minimal. For instance, it may provide browser specifications as an object:

{
    browser:"firefox",
    version:"10.1.5",
    platform:"linux",
    screen-width:"1920",
    // .. etc
}

This library will be installed through NPM. However, to fully utilize its capabilities, users must install "modules" that process the above-mentioned object in unique ways.

For example, one module might identify which CSS features are unsupported in a particular browser version:

{
    unsupportedFeatures:[
        "x",
        "y",
        "z",
        // ... etc
    ]
}

Another module could take both the core library result and the previous module’s outcome to analyze the DOM for any unsupported CSS properties defined.

{
    notSupported:[
        "x",
        "y",
        // ... etc
    ]
}

Note: The mentioned functionalities are hypothetical examples illustrating how modules depend on the core library results as well as each other.

My Attempts So Far

I experimented with defining the core library as a function and adding modules as prototypes.

An issue I encountered was the lack of type definitions for both the core library and the added prototype functions.

I also explored defining the core library as a class, but this approach also led to compiler errors.

Lastly, merging namespace interface declarations yielded additional compilation issues.

Despite trying different solutions, none seemed to effectively work within the realm of TypeScript.

How can I tackle this challenge in TypeScript? What would be the ideal design pattern to follow for creating modular and extensible libraries while ensuring type safety and auto-completion?

typescript design-patterns

Answer 1

Answer №1

Here is the modified playground code that reflects my personal touch:

// Central Library ---------------
namespace coreLib { 
    export interface customInterface { 
        browser: string,
        version: string
    }

    const modules: ((customInterface) => coreLib.customInterface)[] = [];
    export function attachModule(module: (customInterface) => coreLib.customInterface) { 
        modules.push(module);
    }

    export function CoreLibrary (): customInterface { 
        let result: customInterface = {
            browser: "",
            version: ""
        }
        // performing operations
        result.browser = "firefox";
        result.version = "1.0.0";
        modules.forEach((module) => { 
            result = module(result);
        })
        return result;
    }
}

// Extension Module ---------------
namespace coreLib {
    export interface customInterface {
        something?: boolean;
    }
    export function myExtension (input:coreLib.customInterface): coreLib.customInterface { 
        // additional functionality
        input.something = true;
        return input;
    } 
}

// End User Section ---------------
coreLib.attachModule(coreLib.myExtension);
const output = coreLib.CoreLibrary();
console.log(output.browser);
console.log(output.something);

Answer 2

Here is the modified playground code that reflects my personal touch:

// Central Library ---------------
namespace coreLib { 
    export interface customInterface { 
        browser: string,
        version: string
    }

    const modules: ((customInterface) => coreLib.customInterface)[] = [];
    export function attachModule(module: (customInterface) => coreLib.customInterface) { 
        modules.push(module);
    }

    export function CoreLibrary (): customInterface { 
        let result: customInterface = {
            browser: "",
            version: ""
        }
        // performing operations
        result.browser = "firefox";
        result.version = "1.0.0";
        modules.forEach((module) => { 
            result = module(result);
        })
        return result;
    }
}

// Extension Module ---------------
namespace coreLib {
    export interface customInterface {
        something?: boolean;
    }
    export function myExtension (input:coreLib.customInterface): coreLib.customInterface { 
        // additional functionality
        input.something = true;
        return input;
    } 
}

// End User Section ---------------
coreLib.attachModule(coreLib.myExtension);
const output = coreLib.CoreLibrary();
console.log(output.browser);
console.log(output.something);

Typescript patterns for creating a modular library design

Main Concept

My Attempts So Far

Answer №1

Similar questions

What is the best way to define the type of an object in TypeScript when passing it to a function

Exploring the new possibilities of Angular 5: Enhanced REST API service with paginated data and object mapping capabilities

Utilizing a method from a separate class in Ionic 2

When integrating the @azure/msal-angular import into the Angular application, the screen unexpectedly goes blank,

Mongoose encountered an error when attempting to cast the value "ObjectID" to an ObjectId at the specified path "red.s1"

Is it possible to utilize useEffect for verifying the existence of the user token within the localStorage?

Encountering an issue with Jest when using jest.spyOn() and mockReturnValueOnce causing an error

Encountering difficulties accessing props while invoking a component in React

Determining if an emitted event value has been altered in Angular 4

Discovering the array item by its ID using Angular 2 with Typescript

Mastering the Type Model on Firestore Function to Retrieve Field ValuesUnlock the potential of the Type

"Discover the power of Next.js by utilizing dynamic routes from a curated list

A more efficient method for querying documents based on ids that are not in a given list and then sorting them by a specific publish date

Contrasting assign and modify operations on arrays

Subclass method overloading in Typescript

Is there a way to automatically incorporate a component into every view within a Next.js application?

Encountered an error when incorporating nguniversal/express-engine into an Angular project: "Unable to locate the BrowserModule import in /src/app/app.module.ts"

The TypeScript error message states, "The property 'breadcrumb' is not found within the type 'Data'."

Issue: Module '@nrwl/workspace/src/utilities/perf-logging' not found

Why does the property of {{hero.name}} function properly in a <h> tag but not in an <img> tag?