Aurelia CLI & TypeScript & MomentJS

Question

我没有让 Aurelia (CLI) & TypeScript & MomentJS 一起工作。我见过 Aurelia & Moment 问题的解决方案，但他们不使用 Aurelia CLI。

这是我目前正在做的事情：

使用 Aurelia CLI 的新 Aurelia 项目：

au new 

我选择 TypeScript 而不是 Babel。

安装时刻

npm install moment --save

这将安装 Moment 2.4.1。我可以从 node_modules 中找到它（包括 moment.d.ts）。

编辑 aurelia.json

我将“时刻”添加到“依赖项”：

在 app.ts 中使用 Moment

当我现在尝试在 app.ts 中导入 Moment 时，问题就开始了。

import { moment } from 'moment';

这给出错误：“模块“o:/dev/spikes/amoment/node_modules/moment/moment”没有导出成员“moment”

更改大小写可修复此错误：

import { Moment } from 'moment';

但在这一点上，我完全被困住了。当尝试使用时刻（或时刻）时，我总是收到错误“找不到名称‘时刻’。这是当前 app.ts 给出的“找不到名称‘时刻’”-错误：

import { Moment } from 'moment';

export class App {
  message = 'Hello World!';

  hello() : string {
    return moment.format();
  }
}

导入似乎是问题所在。任何想法如何解决这个问题？

更新

在将 app.ts 修复为如下所示后，现在可以编译了。但它在运行时给出“TypeError：无法读取未定义的属性'格式'”。

import { Moment } from 'moment';
import { autoinject } from "aurelia-framework";

export class App {
  message: string;
  moment: Moment;

  constructor(moment: Moment) {
    this.moment = moment;
    this.message = this.moment.format('MMMM Do YYYY, h:mm:ss a')
  }
}

更新

根据上一个错误，如果没有@autoinject，自动注入似乎无法正常工作。所以添加了这一点，错误发生了变化：“TypeError: moment.format is not a function”。

import { Moment } from 'moment';
import { autoinject } from "aurelia-framework";

@autoinject
export class App {
  message: string;
  moment: Moment;

  constructor(moment: Moment) {
    this.message = moment.format();
  }
}

Answer 1

MomentJS 是一个全局模块，它只导出一个moment 变量。 d.ts 文件中的其他接口定义，例如interface Moment，不会真正导出。这些是用于 TypeScript 编译器和智能感知的。

这就是您遇到上述 TS 编译器和 TypeError 问题的原因。你可能用自动注入欺骗了编译器，但没有欺骗浏览器。

时刻的definition file:

declare module 'moment' {
    var moment: moment.MomentStatic;
    export = moment;
}

为了使其正常工作，请使用如下导入语句：[moment docs]

import * as moment from 'moment';

之后，moment 变量变为可用，您可以像往常一样使用它。

在你的课堂上使用：

import * as moment from 'moment';

export class App {
    message = 'Hello World!';

    constructor(){
    }

    hello() : string {
        return moment().format();
    }
}

Answer 2

更新

这实际上不起作用。事情没有编译，但我在运行应用程序时收到“TypeError：无法读取未定义的属性'格式'”。

原创

啊，愚蠢的我。我只需要在课堂上注入 Moment。很明显。

所以这是工作版本：

import { Moment } from 'moment';
import { autoinject } from "aurelia-framework";

export class App {
  message = 'Hello World!';
  moment: Moment;

  constructor(moment : Moment){
    this.moment = moment;
  }

  hello() : string {
    return this.moment.format();
  }
}