TypeScript: imported module becomes undefined when used
<p>TL;DR: A module I'm importing becomes <code>undefined</code> whenever I reference it in a function, but if I check it in the console when not on a breakpoint or on a breakpoint of a function that doesn't use the module, it is defined as expected.</p>

<p>I'm working on converting my JavaScript files to TypeScript in my MVC project. For the most part I have things working, but I'm running into an issue with a particular module. I needed to create a module definition file to use for intellisense in my file, specifically the definition was for MarkdownDeep.</p>

<p>The definition that I created, from what I understand, is as follows:</p>

<pre><code>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);
    }
}
</code></pre>

<p>I placed the Editor class in the <code>declare module</code> statement because the Editor class in the JavaScript source file is in a MarkdownDeepEditor namespace, so the generated JavaScript statement needs to be <code>new MarkdownDeepEditor.Editor(editorElement, previewElement)</code>. <em>When I same namespace, I'm referring to JS style namespaces of <code>var MyNamespace = MyNamespace || {}; MyNamespace.foo = function() {};</code></em></p>

<p>My source file detects the module and interfaces correctly, and I writing a jQuery click event listener which makes an ajax request to an MVC action and loads the response into a textarea on the page. The code for the click event is:</p>

<pre><code>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]);
}
</code></pre>

<p>The issue I'm having is, upon setting a breakpoint in the <code>onQuoteBtnClick</code> the <code>MarkdownDeepEditor</code> object is an object containing the <code>Editor</code> constructor. However, as soon as the Ajax success callback reaches the breakpoint in <code>onQuoteBtnClick_Success</code> the <code>MarkdownDeepEditor</code> object becomes undefined and throws an exception when it tries to call the editor constructor. I then tried calling the constructor in <code>onQuoteBtnClick</code> and as soon as I did the the <code>MarkdownDeepEditor</code> object was once again undefined.</p>

<p><strong>Update</strong> I found a solution to my issue that feels a bit <em>smelly</em> so if someone has a more elegant (or "correct") solution I'd greatly appreciate it!</p>

<p>What I did was declared a <code>var MarkdownDeepEditor: any</code> and use a function to set this variable to the global that is declare by the MarkdownDeep JS file.</p>

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

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