Question

TL; DR：每当我在函数中引用它时，我导入的模块变为undefined，但如果我在控制台中检查它时不在断点上或在函数的断点上没有使用该模块，它被定义为预期。

我正在努力将我的JavaScript文件转换为我的MVC项目中的TypeScript。在大多数情况下，我有一些工作，但我遇到了特定模块的问题。我需要创建一个模块定义文件，用于我的文件中的intellisense，特别是定义是针对MarkdownDeep。

根据我的理解，我创建的定义如下：

interface MarkdownDeepOptions
{
    resizebar?: boolean,
    toolbar?: boolean,
    help_location?: string,
    SafeMode?: boolean,
    ExtraMode?: boolean,
    MarkdownInHtml?: boolean,
    AutoHeadingIDs?: boolean,
    UrlBaseLocation?: string,
    UrlRootLocation?: string,
    NewWindowForExternalLinks?: boolean,
    NewWindowForLocalLinks?: boolean,
    HtmlClassFootnotes?: string,
    HtmlClassTitledImages?: string,
    disableShortCutKeys?: boolean,
    disableAutoIndent?: boolean,
    disableTabHandling?: boolean,
}

interface JQuery 
{
    MarkdownDeep(options?: MarkdownDeepOptions): JQuery;
}

declare module "MarkdownDeepEditor" {
    class Editor
    {
        constructor(editorElement: Element, previewElement: Element);
    }
}

我将Editor类放在declare module语句中，因为JavaScript源文件中的Editor类位于MarkdownDeepEditor命名空间中，因此生成的JavaScript语句需要为new MarkdownDeepEditor.Editor(editorElement, previewElement)。 当我使用相同的命名空间时，我指的是var MyNamespace = MyNamespace || {}; MyNamespace.foo = function() {};

的JS样式命名空间

我的源文件正确检测模块和接口，我编写了一个jQuery click事件监听器，它对MVC操作发出ajax请求，并将响应加载到页面上的textarea中。 click事件的代码是：

import MarkdownDeepEditor = require("MarkdownDeepEditor");

export function onQuoteBtnClick(e: JQueryEventObject): void
{
    // Code truncated for brevity
    $.ajax({
        url: ajaxUrl,
        data: { id: ajaxId },
        success: onQuoteBtnClick_Success
    });
}

export function onQuoteBtnClick_Success(response: string, status: string, jqXhr: JQueryXHR): void
{
    let $editor: JQuery = $("#ThreadReplyEditor textarea.mdd_editor");
    let currentVal: string = $editor.val().trim();
    onPostReplyClick();
    if (currentVal === "")
    {
        $editor.val(response);
    }
    else
    {
        $editor.val(currentVal + "\n\n" + response);
    }
    $editor.trigger("change");
    var editorMarkdown = new MarkdownDeepEditor.Editor($editor[0], $editor.next(".mdd_preview")[0]);
}

我遇到的问题是，在onQuoteBtnClick MarkdownDeepEditor对象中设置断点是包含Editor构造函数的对象。但是，只要Ajax成功回调到达onQuoteBtnClick_Success中的断点，MarkdownDeepEditor对象就会变为未定义，并在尝试调用编辑器构造函数时抛出异常。然后我尝试在onQuoteBtnClick中调用构造函数，并且在我完成后，MarkdownDeepEditor对象再次未定义。

更新我找到了一个解决我的问题的方法感觉有点臭所以如果有人有一个更优雅的（或＃34;正确的＆＃34;）解决方案我和＃39;非常感谢！

我所做的是声明为var MarkdownDeepEditor: any并使用函数将此变量设置为由MarkdownDeep JS文件声明的全局变量。

// TS file
var MarkdownDeepEditor: any;
export function Setup(mdEditor: any): void
{
    MarkdownDeepEditor = mdEditor;
}

// cshtml file
<script type=text/javascript>
    require(["Forums/Thread"], function (Thread)
    {
        Thread.Setup(MarkdownDeepEditor);
    });
</script>

TypeScript：导入的模块在使用时变为未定义

0 个答案: