Typescript: Add a function to moment.js namespace

Question

I'm trying to add extra functionality to moment.js library. I want to add a function that itself requires a moment() call in its body and I'm having a hard time figuring this out.

I'm using the latest version of Typescript and moment.js. I've tried to find a solution but I've come up with nothing. This solution (Typescript: add function to momentjs' prototype) has come close to working, I think, but still nothing.

So far what I have is:

import * as moment from 'moment';

export namespace moment{
    interface Moment{
        myFunc(): boolean;
    }
}

(moment as any).fn.myFunc = function() {
    return moment(....);
};

I'm not sure where I'm going wrong but when I try to use the moment library and myFunc I thought importing moment (import * as moment from 'moment') would be enough but myFunc isn't recognized, only the standard moment functions.

Ex. This says myFunc() isn't recognized.

import * as moment from 'moment'
import Moment = moment.Moment

... moment().add(...) //works
... moment().myFunc() // doesn't recognize myFunc()

Any suggestions on how to get this to work?

You should import your own moment type, not the one exported by moment. So change import * as moment from 'moment' to import * as moment from './moment-extended' or something. — csander
– csander, Commented Aug 4, 2017 at 20:17
Okay so I changed my code to how @csander suggested but it's not working. Am I doing this right? I import * as moment from 'moment' and * as myMoment from './moment.extended in the example above and I try to call myFunc like this: 'myMoment.myFunc()' but I get this error: Property 'myFunc' does not exist on type 'typeof "c:/Git/.../moment.extended"' — J. Doe
– J. Doe, Commented Aug 4, 2017 at 21:04

cartant · Accepted Answer · 2017-08-05 02:55:02Z

9

You can extend moment to include your myFunc using TypeScript's declaration merging.

The following works for me (using TypeScript 2.4.2):

import * as moment from 'moment';

declare module "moment" {
  interface Moment {
    myFunc(): moment.Moment;
  }
}

(moment as any).fn.myFunc = function (): moment.Moment {
  console.log("Called myFunc!");
  return moment();
};

console.log(moment().myFunc().valueOf());

And outputs:

Called myFunc!
1501901308611

answered Aug 5, 2017 at 2:55

cartant

58.6k17 gold badges169 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

puttputt Over a year ago

Looks good. And just to add, if you put this in a separate .ts file - just import the file after moment. import './file';

Hamid Noahdi Over a year ago

@puttputt saved me a lot of time. I added it in main.ts

Collectives™ on Stack Overflow

Typescript: Add a function to moment.js namespace

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related