Unlocking the power of module augmentation in Typescript: Enhancing library models within your app domain

Question

Unlocking the power of module augmentation in Typescript: Enhancing library models within your app domain

I currently work with two applications that share the same code base for their models.

I am interested in developing and sharing a library model using inheritance in TypeScript.

For instance, Pet extends Author.

In my current Angular application, I need to include some prototypal functions that are specific to the application domain in both the Pet and Author classes.

For example:

pet.extension file

Pet.prototype['fetchUrl']

author.extension file

Author.prototype['follow']

So, I create a file called pet.extension which imports the pet.class, where I add domain-specific methods, then export and utilize these extended classes.

When creating a new instance, I import this extension without any issues. My Pet class now has additional prototypal methods. However, this overloaded class relies on pet.class and pet.class extends author.class, not author.extension.

Is there a way to create and use an overloaded version of the Author class?

The ultimate goal is to mimic the extensions feature in Swift language within my library while maintaining the OOP structure.

I hope this explanation is clear :)

Thank you for your assistance!

javascript angularjs oop angular typescript

Answer 1

Answer №1

After much research and trial and error, I have finally discovered the terminology that accurately describes what I am attempting to achieve: module augmentation.

import { Model } from ‘my-library’;

declare module ‘my-library’ {
    interface Model {
        newMethod(): string
    }
}

Model.prototype.newMethod = function() {
    return ‘something’;
}

To illustrate, when working with this code in Visual Studio Code debugger, an error is thrown regarding the use of Model as a value instead of a type in "Model.prototype.newMethod".

‘Model' only refers to a type, but is being used as a value here.

I attempted exporting my library using commonjs and amd, but encountered the same issue.

Subsequently, I tried replicating the code provided on Typescript documentation.

Although no errors were displayed concerning the Model Object itself this time, there was an issue with the assignment method:

'Property 'newMethod' does not exist on type ‘Model’.

My library utilizes typescript 2.1.6 while Angular operates on version 2.0.3.

This situation has become quite frustrating. Does anyone have any insights into what could be going wrong?

Thank you for your assistance.

Answer 2

After much research and trial and error, I have finally discovered the terminology that accurately describes what I am attempting to achieve: module augmentation.

import { Model } from ‘my-library’;

declare module ‘my-library’ {
    interface Model {
        newMethod(): string
    }
}

Model.prototype.newMethod = function() {
    return ‘something’;
}

To illustrate, when working with this code in Visual Studio Code debugger, an error is thrown regarding the use of Model as a value instead of a type in "Model.prototype.newMethod".

‘Model' only refers to a type, but is being used as a value here.

I attempted exporting my library using commonjs and amd, but encountered the same issue.

Subsequently, I tried replicating the code provided on Typescript documentation.

Although no errors were displayed concerning the Model Object itself this time, there was an issue with the assignment method:

'Property 'newMethod' does not exist on type ‘Model’.

My library utilizes typescript 2.1.6 while Angular operates on version 2.0.3.

This situation has become quite frustrating. Does anyone have any insights into what could be going wrong?

Thank you for your assistance.

Unlocking the power of module augmentation in Typescript: Enhancing library models within your app domain

Answer №1

Similar questions

updating the HTML DOM elements using JavaScript is not yielding any response

Issue with Angular routing not functioning properly post form submission

Passing state data from parent to child components in React

Connect jQuery's resizable controls

Using Node.js to Send Emails via API

Tips for preventing the use of nested functions while working with AJAX?

Every time I rotate my div, its position changes and it never goes back to

Blue Jay Guarantees: Construct props object on the fly and execute simultaneously

Is it possible to include a submenu within a md-tooltip?

How can I designate a default value for a variable within a prop in a Vue.Js component?

Running a JS/JSON function in Snowflake that results in a syntax error

"Efficiently sharing information in a multi-tenant application: strategies for seamless data transfer between front

Redirecting to child routes based on conditions

Pagination displays identical data on each page

Having trouble adding global method using Plugin in Vue 3?

Discovering the function invoker when in strict mode

What is the correct approach to importing the Select class in JavaScript with WebDriver?

Is there a way to set up custom rules in eslint and prettier to specifically exclude the usage of 'of =>' and 'returns =>' in the decorators of a resolver? Let's find out how to implement this

Uh oh, it looks like there's an issue! The function getCoordinates is not recognized for this.locations

Avoid having Vue CLI delete all files in the dist folder