Extending momentjs functionality with a custom method in Typescript

I am attempting to extend the momentjs prototype with a new function. In JavaScript, I achieved this with the following code:

Object.getPrototypeOf(moment()).isWeekend = function() {
    return this.isoWeekday() >= 6;
};

How can I accomplish this in TypeScript? I have been advised to duplicate the interface and add my function to it, but my attempt so far has not been successful:

module moment {
    interface Moment {
        isWeekend(): boolean
    }

    Moment.prototype.isWeekend = () => {
        this.isoWeekday() >= 6;
    };
}

Answer №1

In order to properly set up the extension, make sure to place it outside of the module and export the interface...

module time {
    export interface TimeExtension {
        isWeekend(): boolean
    }
}

(<any>time).fn.isWeekend = function() {
    this.dayOfWeek() >= 6;
};

Answer №2

It's actually working perfectly for me.

import * as moment from 'moment';
declare module 'moment' {
  export interface Moment {
    toJapaneseEra(): number;
  }
}

(moment.fn as any).toJapaneseEra = function () {
  const _self = this as moment.Moment;
  return _self.year() - 1988;
}

For more details, please check out:

https://medium.com/my-life/extension-method-in-typescript-66d801488589

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

What is a Mongoose Schema type in TypeScript and how can it be used as a custom

https://i.stack.imgur.com/mtlRi.png Could anyone assist me with storing a custom object that includes attributes from the StationRating interface? ...

Objects vanish 10 seconds after appearing [Angular2, *ngFor]

My Angular2 template is quite straightforward: <span *ngFor="let item of items"> {{ item.description }} </span> Here is the TypeScript logic for it: let list = new Map(); for(let j = 0; j < 100; j++) { list.set(j, { description: j.toS ...

Disable all typings within a specified namespace for a specific file

I need to disable typechecking for a specific namespace called MyNamespace in a Typescript file. Is there a way to achieve this without affecting other files? ...

Consolidate multiple sorting functions into a single function to effectively sort by column

Can someone help me simplify my sorting function for array columns? Currently, I have multiple functions like the one below for each column: sort() { if (this.sortAsc == false) { this.tab.sort((a, b) => { return a.name.localeCompare( ...

Having difficulty running lint on Vue 3 TypeScript application, but building process is successful

We are encountering an issue at the moment. We can successfully build our app, but we are facing challenges with linting using the vue tools (vue-cli-service ...). The hot-reloading feature works initially, but upon saving a file, we receive an error mess ...

Issue encountered while executing Mongoose update function in the router.patch() method

I encountered an issue while trying to update a product on a cloud-based mongoose database using router.patch(). I am simulating the update process with Postman, but I keep receiving an error that says "req.body[Symbol.iterator] is not a function." Below i ...

Use Angular2 to showcase the selected image as the main one when the user clicks on the

I'm working on creating a product thumbnail gallery, and I'd like the main image to be displayed when the user clicks on a thumbnail. I am using Angular for this project, although I am still learning my way around the framework. product.html &l ...

Tips for creating a recursive string literal type in Typescript

I need to create a type that represents a series of numbers separated by ':' within a string. For example: '39:4893:30423', '232', '32:39' This is what I attempted: type N = `${number}` | '' type NL = `${ ...

Leveraging ngIf and ngFor within choice

Is there a way to combine ngIf and ngFor in a single line of code? Here is the code snippet I am currently using: <option *ngIf="tmpLanguage.id!=languages.id" *ngFor="let tmpLanguage of languages" [ngValue]="tmpLanguage.id"> {{tmpLang ...

Is it possible to create a tuple with additional properties without needing to cast it to any type?

To accommodate both array and object destructuring, I have defined the following `Result` type: type Errors = Record<string, string | null>; type Result = [Errors, boolean] & { errors: Errors; success: boolean }; I attempted to create a result of t ...

Navigating Angular single page application routes within an ASP.NET Web API project

Developed an Angular single-page application with specific routes: /messages /messages/:id By using ng serve, I can navigate to these pages at URLs like localhost:4200/messages and localhost:4200/messages/:id After building the solution, I transferred t ...

How can express.js be properly installed using typescript?

Currently, I am in the process of setting up a new project that involves using express.js with typescript integration. Would it suffice to just install @types/express by running the following command: npm install @types/express Alternatively, do I also ...

"Creating a sleek and efficient AI chess game using chess.js with Angular's

Cannot read property 'moves' of undefine Hello there! I am currently working on developing a chess game using Angular. I'm facing an issue with the artificial intelligence in the game where the piece seems to get stuck in the mouse. The l ...

What is the solution to fixing the Vetur/Vuelidate issue where the error message "'validate' does not exist in type 'ComponentOptions<Vue [etc.]" is displayed?

QUERY: I'm facing an issue with error 'validations' does not exist in type 'ComponentOptions<Vue [etc.] when using Vetur with TypeScript installed in VSCode. How can I resolve this? CONTEXT: I integrated Vuelidate into a single-file ...

Discover how to access JSON data using a string key in Angular 2

Trying to loop through JSON data in angular2 can be straightforward when the data is structured like this: {fileName: "XYZ"} You can simply use let data of datas to iterate over it. But things get tricky when your JSON data keys are in string format, li ...

Ensuring Type Compatibility Between Classes and Object Literals in TypeScript

When working with TypeScript, it is important to note that an object literal can be assigned to a class typed variable as long as the object provides all properties and methods required by the class. class MyClass { a: number; b: string; } // The co ...

React Query successfully retrieves the path, but unfortunately fails to render the image in the display

Currently facing an issue where I am trying to retrieve images from the backend using ReactQuery. Here is the ReactQuery code snippet: export const useGetProductImagesByProductId = (productId: string) => useQuery({ queryKey: ['productIm ...

Error message: "Vue3 JSX files are throwing a ReferenceError because React is not defined."

Currently, I am working on integrating storybook with antdv. However, when importing a tsx file that contains jsx within the button.stories.js file, I encountered an error stating "ReferenceError: React is not defined". You can view the error here. It is i ...

Bringing Typescript classes into React-scripts does not act as a constructor

I am currently working on integrating a Typescript file into my existing app using Yarn and React-scripts. Encountered error: Module not found, unable to resolve './DiamondNodeModel' import {DiamondNodeModel} from './DiamondNodeModel&ap ...

Comparison between Destructuring in TypeScript and JavaScript

Starting my journey with TypeScript after a background in JavaScript. In the realm of modern JavaScript, one can easily destructure objects like this: let {n,s} = {n:42, s:'test'}; console.log(n, s); // 42 test Assuming TypeScript follows su ...