Aurelia CLI &打字稿 &MomentJS [英] Aurelia CLI & TypeScript & MomentJS

问题描述

我没有收到 Aurelia (CLI) &打字稿 &MomentJS 一起工作.我已经看到了 Aurelia & 的解决方案时刻问题，但他们不使用 Aurelia CLI.

I'm not getting Aurelia (CLI) & TypeScript & MomentJS to work together. I've seen solutions for Aurelia & Moment problems but they don't use the Aurelia CLI.

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

Here's what I'm doing at the moment:

使用 Aurelia CLI 的新 Aurelia 项目:

au new 

我选择 TypeScript 而不是 Babel.

I select TypeScript instead of Babel.

安装时刻

npm install moment --save

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

This installs Moment 2.4.1. I can find it (including the moment.d.ts) from node_modules.

编辑 aurelia.json

我将时刻"添加到依赖项":

I Add "moment" to "dependencies":

在 app.ts 中使用 Moment

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

Problems start when I now try to import Moment in app.ts.

import { moment } from 'moment';

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

This gives error: "Module "o:/dev/spikes/amoment/node_modules/moment/moment" has no exported member 'moment'

改变外壳修复了这个错误:

Changing the casing fixes this error:

import { Moment } from 'moment';

但在这一点上我完全被卡住了.尝试使用moment(或Moment)时，我总是收到错误找不到名称'moment'.这是当前的app.ts，它给出了找不到名称'moment'"-错误:

But at this point I'm totally stuck. When trying to use moment (or Moment), I always get error "Cannot find name 'moment'. Here's the current app.ts which is giving the "Cannot find name 'moment'" -error:

import { Moment } from 'moment';

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

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

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

The import seems to be the problem. Any ideas how to get around this?

更新

将 app.ts 修复为如下所示后，即可编译.但它在运行时给出TypeError:无法读取未定义的属性'格式'".

After fixing the app.ts to look like the following, the thing now compiles. But it gives "TypeError: Cannot read property 'format' of undefined" when run.

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".

Based on the last error, it seems that autoinject wasn't working without @autoinject. So added that and the error changes: "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();
  }
}

推荐答案

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

MomentJS is a global module, which exports a moment variable only. Other interface definitions in the d.ts file, e.g. interface Moment, won't be exported for real. Those are there for the TypeScript compiler and intellisense.

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

That's why you've experienced TS compiler and TypeError issues above. You may've tricked the compiler with autoinject but not the browser.

moment 的定义文件:

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

为了让它工作，使用这样的导入语句:[moment docs]

In order to get it working, use an import statement like this: [moment docs]

import * as moment from 'moment';

在那之后，moment 变量变得可用，您可以像往常一样使用它.

After that, the moment variable becomes available and you can use it as you normally would.

在课堂上的使用:

import * as moment from 'moment';

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

    constructor(){
    }

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

这篇关于Aurelia CLI &打字稿 &MomentJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！