【问题标题】:Function result undefined when using RequireJS with exported class将RequireJS与导出类一起使用时函数结果未定义
【发布时间】:2019-01-13 17:08:46
【问题描述】:

我正在使用 Typescript、Require 和 AMD 模块。当我调用这个函数时,它返回未定义。如果我记录函数内的值,它们都会正确返回。

如果我不在导出的类中使用 require([ ,它将无法编译。

从 common.ts 文件中导出的类。

export class DateHelpers {
    CheckMaxDateRange(fromDate: string, toDate: string, numberOfDays: Number) {
        requirejs(["moment", "alertify"], function (moment, alertify) {
            moment.locale('en');
            var momToDate = moment(toDate, "MM/DD/YYYY");
            var momFromDate = moment(fromDate, "MM/DD/YYYY");

            var dateDiff = momToDate.diff(momFromDate, 'days');

            if (dateDiff < 0) {
                alertify.alert("From Date must be before To Date.");
                return false;
            }

            else if (dateDiff > numberOfDays) {
                alertify.alert("Date range cannot be greater than " + numberOfDays + " days.");
                return false;
            }

            else {
                return true;
            }
        });
    }
}

调用函数

import * as common from "../../Common/Common.js"
let dateHelpers = new common.CheckMaxDateRange();
dateHelpers.CheckMaxDateRange($('#StartDate').val(), $('#EndDate').val(), 365)

我哪里错了?我之前使用的所有导出函数都不需要任何依赖项。

【问题讨论】:

  • 你好像把类名和方法名弄混了——应该是new common.DateHelpers()

标签: javascript typescript requirejs


【解决方案1】:

不要在 ES6 模块语法中使用 require。您应该 import 模块的依赖项,并配置您的编译器/捆绑程序以支持加载外部脚本(如果您想使用 require.js 库,可能通过发出 AMD 语法模块)。

您也不应该使用没有状态且只有一个方法的classes。写

import * as moment from "moment";
import * as alertify from "alertify";

export function checkMaxDateRange(fromDate: string, toDate: string, numberOfDays: Number) {
    moment.locale('en');
    var momToDate = moment(toDate, "MM/DD/YYYY");
    var momFromDate = moment(fromDate, "MM/DD/YYYY");

    var dateDiff = momToDate.diff(momFromDate, 'days');

    if (dateDiff < 0) {
        alertify.alert("From Date must be before To Date.");
        return false;
    }

    else if (dateDiff > numberOfDays) {
        alertify.alert("Date range cannot be greater than " + numberOfDays + " days.");
        return false;
    }

    else {
        return true;
    }
}

import * as common from "../../Common/Common.js";

common.checkMaxDateRange($('#StartDate').val(), $('#EndDate').val(), 365)

【讨论】:

  • 感谢您的知识和解释。我是否在配置文件中定义了“moment”和“alertify”?
  • @stanggt3 是的,我认为您需要告诉 typescript 编译器有关外部模块的信息
【解决方案2】:

我认为您的导出不是问题,因为您可以将您的课程导出为:

export class X {...}
export class Y {...}

class X {...}
class Y {...}
export { X, Y }

我认为问题可能在于您如何导入导出的类:

import { DateHelpers} from "./path_to_class/DateHelpers";
let dateHelpers = new DateHelpers();

在调用方法之前检查您的 dateHelpers 变量是否未定义。
它将帮助您找出问题所在。

【讨论】:

  • 已定义。返回结果是未定义的部分。我猜是因为 require 是函数内部的一个嵌套函数,我实际上需要它的值。如果我将函数带入我调用它的 .ts 文件中,它实际上会抛出相同的错误。为了清楚起见,我将导入语句添加到原始帖子中
猜你喜欢
  • 2013-04-01
  • 2016-12-06
  • 2014-10-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多