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

The map function is calling an unresolved function or method named "map"

WebStorm provides alerts for objects, types, and directives within Angular, yet they function properly

Mastering the art of constraining TypeScript function parameters using interface properties

Bringing in personalized data types using unique import aliases

Angular is used to call a function that captures a specific div and then waits for the capture to be completed before

Function modifies global variable

Troubleshooting problem with refreshing URL on "ionic serve" mode

Leveraging Class Types with Generics

Implementing Asynchronous context tracking within a Remix application utilizing Express as the server

Encountering an Issue with Dynamic Imports in Cypress Tests Using Typescript: Error Loading Chunk 1

Encountering an ECONNREFUSED error upon upgrading from Next.js 12 to 13

Contact the help desk and receive information that is currently unknown

Using useState, react, and typescript, is there a way to set only the icon that has been clicked to

The input type '{}' does not match the expected type 'Readonly<IIdeasContainerProps>'. The property '...' is not found in the type '{}'

Error in Typescript TS2322: Observable Type 'boolean | {}' - Using Angular 5 and Typescript 2.4.2

'The signatures of each of these values are not compatible with one another.' This error occurs when using find() on a value that has two different array types

Issue with TypeORM findOne method causing unexpected output

Join our mailing list for exclusive updates on Angular 6

How can I assign a type to an array object by utilizing both the 'Pick' and '&' keywords simultaneously in TypeScript?

Google Maps on Angular fails to load