TypeScript import module does not exist in current scope

Question

Why would the TypeScript compiler issue error "The name m does not exist in the current scope" in Logger.ts even though it is able to resolve Model.LogMessage defined LogMessage.ts

These are the associated files:

Logger.ts:

    ///<reference path="Utils.ts"/>
    /// <reference path="../Models/LogMessage.ts"/>
    /// <reference path="JqGridUtilities.ts"/>



    module Utilities {

        declare var $;
        import m = Model;
        //import jqu = Utilities;

        export class Logger {        

                static logs:  m.LogMessage[];  // how to do typed array????

                logs1: m.LogMessage[];

                static logsGridClass = "jqgdash_logs";
                static gridName = "jqgdash";
                static logsGridHeader = "Info Center";            

  static displayDataOnConsole(gridClass : string, gridHeader : string, theData) {

                if (theData != null && theData.length > 0) {
                    var grid = $("#" + gridName);

                    if (gridClass === logsGridClass) {
                        if (!grid.hasClass(logsGridClass)) {
                            GridUtils.reconfigureGrid(gridName, gridHeader, theData);
                            grid.addClass(logsGridClass);
                        } else {
                            GridUtils.addDataToGrid(gridName, gridHeader, theData);
                        }   
                    } else {
                        if (grid.hasClass(logsGridClass)) {
                            grid.removeClass(logsGridClass);
                    }

                    GridUtils.reconfigureGrid(this.gridName, gridHeader, theData);
                }
            }
        }


          static  createErrorLogs(messages : string) : m.LogMessage[] {
                    if (messages == null) return [];
                    $.each(messages, function (i, msg) {
                        logs.push(this.createLogJson("error", msg));
                    });

                    return logs;
                }

           static logMessageToConsole (severity : string, message : string) {
                    this.logs.push(this.createLogJson(severity, message));
                }      
            }      
    }

LogMessage.ts:

module Model { 
       export class LogMessage {

        message: string;
        timeStamp: Date; 
        severity: string;

        constructor (severity : string, message: string, date: Date) {
            this.message = message;
            this.timeStamp = date;
            this.severity = severity;
        }
     }
}

and Utils.ts:

module Utils { 

    declare var tut;

   export var liveString = "http://" + window.location.host + '/trackutransit';

    export function executeAjaxPostJsonCall(url : string, success : any ) { 
        return  $.ajax(url,
        {
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            error: tut.Logger.displayAjaxError,
            success : success  });
         }

   export function getResourcePath(relativePath: string): string {
            return liveString + relativePath;
        }

    export function isMobile(): bool {
            var index = navigator.appVersion.indexOf("Mobile");
            return (index > -1);
        }
}

JQGridUtilities.ts is defined in the same folder as Logger.ts as follows:

///<reference path="Utils.ts"/>
module Utilities{

    declare var jqGrid;


    declare var $;
    //import t = TrackuTransit;

    export class GridUtils {

        static instance = new GridUtils();

        constructor() { }

      static  isUserFriendlyField(key : string) : bool {    
        return true;
    }

    // Extracts the fields from this Json object
   static extractColumnsFromJsonObject(obj) : any[]{
        var columns = new Array();
        if (obj) {
            for (var key in obj) {
                if (isUserFriendlyField(key)) {
                    columns.push(key);
                }
            }
        }

        return columns;
    }

   static  addDataToGrid(gridId, gridHeader, data) {
        if (data != null) {
            var grid = $("#" + gridId);
            for (var i = 0; i < data.length; i++) {
                grid.jqGrid('addRowData', i, data[i]);
            }
        }
    }

    static createColumnModels(columns)  : any[]{

        var model = [];

        $.each(columns, function (i, column) {
            if (this.isUserFriendlyField(column)) {
                if (column === "icon" || column === "image") {
                    model.splice(0, 0, { name: column, label: ' ', width: 16, formatter: function (cellvalue, options, rowObjects) {
                        return "<img src='" + cellvalue + "' width='16px' height='16px'/>";
                    }
                    });
                }
                else if (column === "Severity") {
                    model.splice(0, 0, {
                        name: column,
                        label: ' ',
                        width: 20,
                        formatter: function (cellvalue, options, rowObjects) {
                            var imagePath = Utils.liveString + '/Content/images/' + cellvalue + '.png';
                            return "<img src='" + imagePath + "' width='16px' height='16px'/>";
                        }
                    });
                }
                else {
                    if (column === "display_name") {
                        model.splice(0, 0, { name: column, label: "name" });
                    } else {
                        model.push({ name: column, label: column, width: 70 });
                    }
                }
            }
        });

        return model;
    }

   static reconfigureGrid(gridName, gridHeader, theData) {
        if (!gridName)
            throw ("grid name must be specified");

        if (gridHeader, theData != null && gridHeader, theData.length > 0) {

            var columns = extractColumnsFromJsonObject(theData[0]);
            var colsModel = createColumnModels(columns);

            // todo: report unable to chain jQuery methods as bug for jqGrid
            $("#" + gridName).jqGrid('GridUnload');
            $("#" + gridName).jqGrid({
                datatype: "local",
                data: theData,
                autowidth: true,
                colModel: colsModel,
                pager: '#pager',
                rowNum: 10,
                rowList: [5, 10, 20, 50],
                height: 120,   // constant height allows grid navigator to show, if parent div is constant height
                width: '100%',
                viewrecords: true,
                caption: gridHeader
            });
        }
    }


    }

}

If I remove reference to JqGridUtilities.ts in Logger.ts, the error disappears but now GridUtils can no longer be resolved. If I define GridUtils using a different module name, say, jqGridUtilities instead of Utilities, I no longer get this error. Why is this?

Answer 1

This is what I have based on your examples...

It looks like you are going for a bundling strategy... i.e. you are asking TypeScript to leave how the JavaScript gets loaded to you. You will either add all the scripts to the page or you'll bundle them into a single file and minify it.

When you do this, you can pretty much ignore the import keyword and just use reference comments to describe the files that you will make available at runtime.

With this in mind, here is your Logger.ts file

The changes are mainly the absence of the import statements, but I have also shown how you instantiate a typed array (you just follow the declaration with = [].

/// <reference path="Utils.ts"/>
/// <reference path="./Models/LogMessage.ts"/>
/// <reference path="JqGridUtilities.ts"/>

module Utilities {
    declare var $;

    export class Logger {

        static logs: Model.LogMessage[] = [];  // how to do typed array? - Like this

        logs1: Model.LogMessage[] = [];

        static logsGridClass = "jqgdash_logs";
        static gridName = "jqgdash";
        static logsGridHeader = "Info Center";

        static displayDataOnConsole(gridClass: string, gridHeader: string, theData) {

            if (theData != null && theData.length > 0) {
                var grid = $("#" + gridName);

                if (gridClass === logsGridClass) {
                    if (!grid.hasClass(logsGridClass)) {
                        GridUtils.reconfigureGrid(gridName, gridHeader, theData);
                        grid.addClass(logsGridClass);
                    } else {
                        GridUtils.addDataToGrid(gridName, gridHeader, theData);
                    }
                } else {
                    if (grid.hasClass(logsGridClass)) {
                        grid.removeClass(logsGridClass);
                    }

                    GridUtils.reconfigureGrid(this.gridName, gridHeader, theData);
                }
            }
        }


        static createErrorLogs(messages: string): m.LogMessage[] {
            if (messages == null) return [];
            $.each(messages, function (i, msg) {
                logs.push(this.createLogJson("error", msg));
            });

            return logs;
        }

        static logMessageToConsole(severity: string, message: string) {
            this.logs.push(this.createLogJson(severity, message));
        }
    }
}