How to consume the Moment.js TypeScript definition

Question

I'm in the process of converting a website to use TypeScript and I'm converting just one of many JavaScript files to TypeScript. All pages of my site already reference moment.js, such as:

<script src="/scripts/moment.min.js"></script>

I've added other TypeScript definition files using:

npm install --save-dev @types/jquery

... But, the above seems like the wrong choice for moment. When I use the above command (but substitute 'moment' for 'jquery'), a readme file is downloaded that says:

This is a stub types definition for Moment (https://github.com/moment/moment). Moment provides its own type definitions, so you don't need @types/moment installed!

As a solution, I tried saving the moment.d.ts file from its GitHub repo and referencing it in the TypeScript file as so:

///<reference path="../../Scripts/typeDeclarations/moment.d.ts"/>
var now:any = moment.utc();

But, TypeScript gives me the warning:

Cannot find the name 'moment'

Answer 1

As of version 2.13.0, Moment includes a typescript definition file. So if you are using this version you can do following:

import * as moment from 'moment';


let now = moment().format('LLLL');

Note: If you have trouble importing moment, try add "allowSyntheticDefaultImports": true in compilerOptions in your tsconfig.json file.

For reference please visit official doc.

Answer 2

Unfortunately, the momentjs type declarations are written in a purely modular syntax. This is because these days, many people are using npm to acquire js packages and then using module loaders such as Webpack or Browserify to bundle the npm modules in a format usable for the browser.

In your case, you are not using modules, but just relying on importing browser scripts in a global context. In order to support this, the authors of the definition files should have made the definition following UMD guidelines,which is a way to write the definition so that they support both modular and global ambient use.

Fortunately, it's extremely easy for you to add this to your copy of the definitions. Simply add the following line to the top of moment.d.ts

export as namespace moment;

What this does is basically say that when you are referencing moment.d.ts with a tripple-slash directive, it will make available everything exported from the module under a global namespace with the name of 'moment'.

This means there should now be a global moment variable accessible in the global context and you should no longer see the Cannot find the name 'moment' error.

This should be all you need to do.

Answer 3

TL;DR;

Add the moment.d.ts (link) in your project from the moment github site and comment out the last line

 //export = moment;

---

I have created a mini test project to prove this and this works for me.

Project structure

--
  |
  -typings/
     -moment/
       -moment.d.ts   <-- //export = moment; commented out
  -typescript/
     -main.ts
  -tsconfig.json

Contents of both typings and typescript are part of the compilation target, i.e. not excluded in tsconfig.json which looks like this

{
    "compilerOptions": {
        "target": "es5",
        "declaration": false,
        "noImplicitAny": true,
        "removeComments": true,
        "outDir": "dist",
        "jsx": "react",
        "sourceMap": true,
        "experimentalDecorators": true
    },
    "compileOnSave": true,
    "exclude": [
        "node_modules",
        "dist"
    ]
}

The main.ts file contains

const now: moment.Moment = moment.utc();

and compiles... As expected, my IDE gives me auto-completion from the definition file. (no need for ///<reference tags - you should avoid them anyway)

Removing the export statement at the end of the definition file, "transforms" it into an internal - but global - module declaration file.

Answer 4

One way to do this is create a custom typing, e.g. custom-typings/moment.d.ts:

export * from 'moment'
export as namespace moment

And include that folder in your tsconfig.json:

{
  include: [
    "custom-typings"
  ]
}