使用Moment与Angular和TypeScript

时间:2017-02-14 13:36:09

标签: javascript angularjs typescript momentjs

我是TypeScript的新手,因为我已经完成了任何严肃的JavaScript开发,所以我可能会遗漏一些明显的东西。

我正在尝试使用TypeScript在Angular 1应用中使用Moment。

我正在使用Angular 1.6.5,Moment 2.17.1和TypeScript 2.17.1。我从npm @types\angular包中安装了Angular类型。 Angular的Intellisense等在VS Code中工作。

我已将示例代码发布到GitHub:https://github.com/kevinkuszyk/moment-angular-typescript

第一个错误

我的示例应用程序在浏览器中运行,但TypeScript编译器抱怨它无法找到时刻:

app/controller.ts(3,20): error TS2503: Cannot find namespace 'moment'.
app/controller.ts(6,30): error TS2304: Cannot find name 'moment'.

尝试使用///编译器指令

要解决此问题,我尝试添加以下///编译器指令:

/// <reference path="../node_modules/moment/moment.d.ts" />

但这并没有修复TypeScript编译器:

app/controller.ts(5,20): error TS2503: Cannot find namespace 'moment'.
app/controller.ts(8,30): error TS2304: Cannot find name 'moment'.

导入时刻

接下来,我尝试使用docs

中的说明导入Moment
import * as moment from 'moment';

但这会使TypeScript生成不同的erorr:

app/controller.ts(13,5): error TS2686: 'angular' refers to a UMD global, but the current file is a module. Consider adding an import instead.

导入Angular

我还导入了Angular。这修复了TypeScript:

import * as angular from "angular";

但现在该应用程序无法在浏览器中运行:

Uncaught ReferenceError: require is not defined
    at controller.js:2

使用Require.JS

最后我尝试添加Require.JS,但这只会导致不同的运行时错误:

Uncaught Error: Module name "moment" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
    at makeError (require.js:168)
    at Object.localRequire [as require] (require.js:1433)
    at requirejs (require.js:1794)
    at controller.js:2

问题

  1. 我在这里错过了哪些明显的东西吗?
  2. 在npm上引用主程序包附带的d.ts文件而不是单独的@types程序包,最佳做法是什么?
  3. 如何在不使用外部模块加载器的情况下完成此工作?

2 个答案:

答案 0 :(得分:6)

看来这是Moment的d.ts文件的已知问题(请参阅问题#3763#3808#3663)。

在我们等待正式修复的同时,这对我有用。

变化:

export = moment;

到此:

declare module "moment" {
    export = moment;
}

答案 1 :(得分:0)

尝试在@types文件中明确声明tsconfig.json范围包到typesRoot:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "typeRoots": [
            "./node_modules/@types"
        ]
    }
}

确保在node_modules/@types/...中正确安装了类型定义,并确保TypeScript编译器是最新的。