What steps do we need to take in TypeScript to generate extension methods for interfaces that are not global?

Currently diving into TypeScript, I find myself stuck when trying to implement extension methods for non-global interfaces. To illustrate, let's take a look at an interface that defines a Cart:

interface Cart {
    id(): string,
    name(): string,
    quantity(): number

    /* Other methods */
}

My goal is to introduce an extension method similar to the following:

Cart.prototype.isValid = function() {
    return this.quantity() > 0;
}

This approach hits a roadblock because Cart is not a type. However, what puzzles me is that even though `Promise` is also declared as an interface, I am able to successfully add extension methods to it. For instance:

declare global {
    interface Promise<T> {
        hello(): string
    }
}

Promise.prototype.hello = function() {
    return "Hello!";
}

export {};

So, my question is: Is there a way to extend non-global interfaces like Cart, and if so, how can I achieve this?

Answer №1

For your scenario, consider Cart as simply a type. There isn't an object to extend the prototype of a type/interface reference. Since there's no prototype to extend, you could achieve this by using an object that implements Cart.

Regarding Promise, it functions as a browser API. If you access your console in the Browser and type Promise, you will notice an object there. When you extend the promise prototype like in the example provided, you are not extending the interface but rather this provided object.

If you wish to accomplish this, one option is through interface composition:

interface CartSpecial extends Cart {
    ...
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain a document from an Angular 2+ software program

In the process of developing a web application using Angular 9, there is a requirement from the client that a PDF should be downloaded upon submitting a form on a particular page. The backend (server-side) is able to generate the PDF file successfully and ...

A guide to incorporating Material-UI ThemeProvider and WithStyles with Typescript

I've been feeling frustrated lately as I've been dedicating the past few days to migrating my React application from JavaScript to TSX. While I appreciate the type checking that TSX provides, I'm struggling with understanding how to implemen ...

React Router throwing an error about an Invalid Hook Call when attempting to use useState in index.tsx instead of App.js

I'm currently learning React Router by following a video tutorial, but I've run into an issue. In my Stackblitz project, there is no App.js file, so I've placed everything inside index.tsx. However, now I need to use the line ----> const ...

Angular D3 - The method 'getBoundingClientRect' is not present in the 'Window' type

Check out this StackBlitz demo I created: https://stackblitz.com/edit/ng-tootltip-ocdngb?file=src/app/bar-chart.ts In my Angular app, I have integrated a D3 chart. The bars on the chart display tooltips when hovered over. However, on smaller screens, th ...

Unlocking the secrets of integrating Vuex store with JavaScript/TypeScript modules: A comprehensive guide

I am working on a vue application and I have a query. How can I access the store from javascript/typescript modules files using import/export? For example, if I create an auth-module that exports state, actions, mutations: export const auth = { namesp ...

Exploring methods of testing a simple React functional component using Jest, TypeScript, and type annotations

I have been struggling for a long time to find a straightforward example of how to test a simple react component using jest and typescript. Despite my efforts, I have not been successful in finding a solution. I have checked out: https://basarat.gitbooks.i ...

Comparing the cost of memory and performance between using classes and interfaces

As I delve into writing TypeScript for my Angular project, one burning question arises — should I use an Interface or a Class to create my domain objects? My quest is to uncover solid data regarding the actual implications of opting for the Class route. ...

Tips for utilizing a personalized design with the sort-imports add-on in VS Code?

After recently installing the VS Code extension sort-imports, I decided to give a custom style called import-sort-style-module-alias a try. Following what seemed to be the installation instructions (via npm i import-sort-style-module-alias) and updating m ...

Using the length of an array as an iterator within a nested ngFor loop in Angular 9

I am looping through an array of objects where each object contains another array of objects with attributes like "name" and "id". The length of this array of objects (noticias) varies. I am struggling to display these values and have only managed to acce ...

Applying Material UI class in React: Troubleshooting an error with your hook call

Recently, I have started using React and encountered an issue with a hook call. I understand the root cause of the problem but unsure how to resolve it without starting from scratch. Here is the snippet of the code: import { Fragment, PureComponent } from ...

Require type parameter to be of enum type

I have a specific goal in mind: // first.ts export enum First { One, Two, Three } // second.ts export enum Second { One, Two, Three } // factory.ts // For those unfamiliar, Record represents an object with key value pairs type NotWorkingType ...

What are the steps to integrate TypeScript into JavaScript code?

How can I import a TypeScript class in a Node CommonJS JavaScript file? When using mongoose in my TypeScript code, I typically do the following: // user.model.ts export const UserModel = model<User>('User', schema); In my JavaScript code: ...

Facing an issue with displaying a component error in a mat-form-field in Angular 9

I am looking to develop a shared component for displaying errors in Angular Material. Here is my shared component pfa-share-error: <mat-error *ngIf="fieldErrors(fieldName).required && fieldErrors(fieldName)"> Required </mat-err ...

Create an array filled with multiple arrays containing objects

To achieve the desired array of array of objects structure, I need to populate the data like this: let dataObj = [ [ { content: "test1"}, { content: "test2"}, { content: "test3"} ], [ ...

Is it possible for Typescript to automatically infer object keys based on the value of a previous argument?

Currently, my goal is to create a translation service that includes type checking for both tags and their corresponding placeholders. I have a TagList object that outlines the available tags along with a list of required placeholders for each translated st ...

Error with scoped slot typing in Vue3 using Vite and Typescript

I am currently working on a project using Vue3, Vite, and TypeScript as the devstack. I encountered an error related to v-slot that reads: Element implicitly has an 'any' type because expression of type '"default"' can't ...

Tips for relocating the indicators of a react-material-ui-carousel

I am working with a carousel and dots indicators, but I want to move the indicators from the bottom to the circular position as shown in the image below. I attempted using a negative margin-top, but the indicators ended up being hidden. Is there another ...

Connecting HTML to an AngularFirestore collection using snapshotChanges

In my mobile app, I am using AngularFirestore2v5/rxjs to connect a hybrid Ionicv3/Angularv4 app to a Firestore collection. While binding UI with AngularFirestore.valueChanges works fine, switching to snapshotChanges for retrieving the id is causing some is ...

Struggle with Loading Custom Templates in Text Editor (TinyMCE) using Angular Resolver

My goal is to incorporate dynamic templates into my tinyMCE setup before it loads, allowing users to save and use their own templates within the editor. I have attempted to achieve this by using a resolver, but encountered issues with the editor not loadin ...

Sending dynamic information via Angular 2 routing

Passing static data to an Angular 2 route without displaying it in the URL is achievable. However, the real challenge lies in passing dynamic data or objects using the same approach. ...